CSS3中border边框属性怎么用
这篇文章主要介绍CSS3中border边框属性怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联网站建设服务商,为中小企业提供成都网站设计、成都做网站服务,网站设计,网站托管、服务器租用等一站式综合服务型公司,专业打造企业形象网站,让您在众多竞争对手中脱颖而出创新互联。
CSS3 的边框属性可以给创建圆角的盒子,也可以给盒子设置阴影,用图片美化盒子。
border-radius可以给元素设置圆角。
如下,一个div元素:
我们给它加一点样式,并设置它的border-radius为15px:
.box{
width: 284px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
font-size: 14px;
background: #999;
border:2px solid #333;
border-radius: 15px;
浏览器中查看效果:
CSS3 新特性——border 边框属性
border-radius也可以给它四个角分别设置角度,四个值依次代表左上,右上,右下,左下:
border-radius: 15px 15px 0px 0px;
CSS3 新特性——border 边框属性
box-shadow可以为元素设置边框阴影。box-shadow设置的属性如下:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平阴影的位置,可以是负值。
v-shadow 垂直阴影的位置,可以是负值。
blur 模糊距离。
spread 阴影的尺寸。
color 阴影的颜色。
inset 将外部阴影 (outset) 改为内部阴影。
以上 h-shadow ,v-shadow是必须要设置的,其他的可以根据需要去设置。
我们给上面的div元素添加阴影:
css样式:
.box{
width: 284px;
height: 100px;
background: #f60;
box-shadow: 10px 10px 5px #ccc;
浏览器中查看效果:
CSS3 新特性——border 边框属性
border-image 使用图片设置边框。
如下:
我们先给div元素的边框颜色设置为透明(transparent),然后在使用图片设置边框:
.box{
width: 284px;
height: 100px;
border:15px solid transparent;
width:300px;
padding:10px 20px;
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
看一下效果:
童靴们可能不懂为啥属性的前边会有-webkit-、-o-这样的前缀呢?这是因为好多浏览器都不支持CSS的新特性,所以写这些专属的前缀是为了兼容各浏览器。
以上是“CSS3中border边框属性怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
标题名称:CSS3中border边框属性怎么用
当前路径:http://myzitong.com/article/ppheph.html