css3新属性border-radius的用法介绍
这篇文章主要介绍“css3新属性border-radius的用法介绍”,在日常操作中,相信很多人在css3新属性border-radius的用法介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css3新属性border-radius的用法介绍”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
10年积累的成都做网站、成都网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先制作网站后付款的网站建设流程,更有寿光免费网站建设让你可以放心的选择与我们合作。
1、在之前我想在页面做出一个边框为圆角框,貌似需要写挺多css代码的(可能我没了解到更好的办法),在css3里有一个属性创建圆角是非常容易的,设置好角度也可以创建一个圆
border-radius:
css代码:
代码如下:
#test
{
text-align:center;
padding:10px 40px;
background:gray;
width:350px;
border-radius:10px;
-moz-border-radius:10px; /* 为了让老的 Firefox版本支持 */
}
html代码:
代码如下:
2、CSS3 边框阴影,之前我都是直接利用图片做背景实现的效果,用css3中的box-shadow属性也可以做到
box-shadow:
css代码:
代码如下:
#test1
{
box-shadow: 10px 10px 5px #A5A5A5;
width:300px;
height:100px;
}
html代码:
代码如下:
3、css3 支持背景图片可以用多张图片
CSS3 多重背景图片
代码如下:
.box
{
width:464px;
height:300px;
background:url(test1.jpg) 0 0 no-repeat,url(test2.jpg) 100% 0 no-repeat;
}
4、text-overflow 属性规定当文本溢出包含元素时发生的事情。
此属性支持切断容器中的文本,当文本溢出可以给出了一个省略号的特性。
代码如下:
.test3 {
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border: 1px solid black;
width: 400px;
padding: 20px;
cursor: pointer;
}
#test3:hover {
white-space: normal;
color: rgba(0,0,0,1);
background: #e3e3e3;
border: 1px solid #666;
}
5、过渡效果,通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
效果用贴图比较难体现出来,有兴趣自己运行下面代码:
代码如下:
到此,关于“css3新属性border-radius的用法介绍”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
名称栏目:css3新属性border-radius的用法介绍
文章来源:http://scyanting.com/article/jdjeep.html