网站地图    收藏   

主页 > 专题教程 > css >

border

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] CSS border属性是用于设置元素一个元素上右下左四条边框的宽度,颜色和线条样式的简写属性。...

CSS border属性是用于设置元素一个元素上右下左四条边框的宽度,颜色和线条样式的简写属性。

border属性可以同时设置一个元素的属性、属性和属性。

虽然、和属性可以接收4个值来分别设置元素边框的宽度,线条样式和颜色,但是border属性只能接收3个参数,分别是元素边框的宽度,颜色和线条样式,所以使用border属性来设置元素边框会使得元素的四条边框相同。

和所有的CSS简写属性一样,如果border属性有值缺省会被设置成初时值。同时需要注意设置border属性对属性的影响,虽然border属性不能设置这个属性,但会把该属性重置为初始值none。这使得我们可以用border属性去重置整个样式表中的border设置。因为W3C计划在未来的标准中保留该属性,因此建议使用该属性重置边框设定。

border属性可以接收一个,两个或三个参数作为值。没有设置的缺省值会被设置为它们的初始值。

官方语法
border: <line-width> || <line-style> || <color>                           
                            

参数:

  • <line-width>:元素边框的宽度。详细信息可以参考属性。
  • <line-style>:元素边框的线条样式。详细信息可以参考属性。
  • <color>:元素边框的颜色。详细信息可以参考属性。

border属性的初始值为:0 none currentColor

应用范围

border属性可以应用在所有的元素上。

示例代码

下面是一些border属性合法取值的示例代码:

/* 边框的颜色和样式设置为初始值 */
border: 1em;

/* 宽度为初始值0,元素边框不可见 */
border: solid teal; 

/* 1个像素灰色dotted样式的边框*/
border: 1px dotted #eee;

/* 5像素橙色实线边框 */
border: 5px solid orange;                              
                            
在线演示

下面的例子为元素设置10像素粉红色的虚线边框。

.container{
  width: 700px;
  height: 350px;
  border: 10px dashed #d2527f;
}                              
                            
border: 10px dashed #d2527f;

浏览器支持

所有的现代浏览器都支持border-bottom属性,包括Chrome,Firefox,Safari,Opera,IE 以及 Android 和 iOS。

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论