CSS盒子模型的相关属性 边框属性 边距属性 阴影属性

鳄鱼君

发表文章数:642

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS » CSS盒子模型的相关属性 边框属性 边距属性 阴影属性

盒子模型的边框属性

为了分割页面中不同的盒子,常常需要给元素设置边框效果

边框样式

边框样式(border-style)的基本语法格式为:border-style:上边 [右边 下边 左边];,常用属性值有none(默认无)、hidden(隐藏)、solid(单实线)、dashed(虚线)、dotted(点线)、double(双实线)。我们可以分别对四个边框设置不同的样式

<style type="text/css">
    .one{border-style: dotted solid;} /*上下为点线,左右为单实线*/
    .two{border-style: solid dotted dashed;} /*上实线,左右点线,下虚线*/
</style>

<p class="one">边框样式--上下为点线,左右为单实线</p>
<p class="two">边框样式--上边框单实线,左右边框点线,下边框虚线</p>

在不同的浏览器中点线datted和虚线dashed的显示边框样式和双实线的样式可能会有差异。

边框宽度

边框宽度(border-width)用于设置边框宽度,其基本语法为border-width:上边 [右边 下边 左边];,属性值为可设置为thin、thick和length,length为具体像素值(px)。同样可以分别对四个边框设置宽度:

<style type="text/css">
    p{border-style: solid; }
    .one{border-width: 3px;} 
    .two{border-width: 3px 1px;} 
    .three{border-width: 3px 1px 2px;} 
</style>

<p class="one">边框宽度--2px,边框样式--单实线</p>
<p class="two">边框宽度--上下3px,左右1px,边框样式--单实线</p>
<p class="three">边框宽度--上3px,左右1px,下2px,边框样式--单实线</p>

边框颜色

边框颜色(border-color)用于设置边框的颜色,其基本语法为border-color:上边 [右边 下边 左边];。属性值可以为预定义的颜色值,比较常用的十六进制RGB代码,比如红色是“#FF0000”,或者是rgb(r,g,b)、rgb(r%,g%,b%)。同样可以分别对四个边框设置颜色,具体效果同上。

CSS3在元边框颜色属性(border-color)的基础上派生了4个边框颜色属性:border-top-colors、border-right-colors、border-bottom-colors、border-left-colors,属性值个border-color相同。

设置边框颜色时必须设置边框样式,如果未设置样式或设置为none,则其它的边框属性无效。

综合设置边框

综合设置边框使用border:四边宽度 四边样式 四边颜色;。可以使用border-top(上边框)、border-right(右边框)、border-bottom(下边框)、border-left(左边框)定义单独的边框样式,例如:p{border-top:2px solid #CCC;}(定义上边框,各个顺序任意)。如果四条边框的边框样式都相同时,可以使用border属性进行综合设置。宽度、样式、颜色顺序任意,不分前后

圆角边框

圆角边框(border-radius)用于设置圆角边框,其基本语法格式为border-radius:水平半径参数/垂直半径参数;,属性值为像素值(px)或者百分比。

border-radius属性同样遵循值复制的原则,其水平半径(参数1)和垂直半径(参数2)均可设置1-4个参数值,用来表示圆角半径大小

  • 参数1和参数2设置一个参数时,表示四角的圆角半径。
  • 参数1和参数2设置两个参数时,第一个参数值代表左上角半径右下角半径,第二个参数值表示右上左下圆角半径
  • 参数1和参数2设置三个参数时,第一个参数值代表左上圆角半径,第二个参数值代表右上左下圆角半径,第三个参数值代表右下圆角半径。例如:img{border-radius:50px 20px 10px/30px 40px 50px;}
  • 参数1和参数2设置四个参数时,第一个参数值代表左上圆角半径,第二个参数值代表右上圆角半径,第三个参数值代表右下圆角半径,第四个参数值代表左下圆角半径。例如:img{border-radius:50px 30px 20px 10px;}

当应用值复制原则设置圆角边框时,如果“参数2”省略,则会默认等于“参数1”的参数值。

图片边框

图片边框使用border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式;

像border、border-top等,能够一个属性定义元素的多种样式,在CSS中称之为复合属性。常用的复合属性有font、border、margin、padding和background等。实际工作中常使用复合属性,它可以简化代码,提高页面的运行速度。

如果提供一个参数,将用于全部四边;
如果提供两个参数,第一用于上下,第二用于左右;
如果提供三个参数,第一个用于上,第二个用于左右,第三个用于下;
如果提供四个参数,将按照上、右、下、左的顺序作用于四边,还是逆时针顺序。

盒子模型的边距属性

边距属性包括内边距(padding)和外边距(margin)。所谓内边距指的是元素内容和边框之间的距离,也叫内填充。同border属性一样,内边距(padding)也是一个复合属性,具体不再详细介绍了。设置上下左右的padding时,分别对应上、右、下、左四个方向的padding,顺时针排序(margin属性也可以这样书写)。内边距值不能为负值。

外边距(margin)指的是元素边框与相邻元素之间的距离,它也可以按照顺时针排序来书写。外边距可以使用负值。

margin用于控制块与块(可以理解为块级元素)之间的距离。初学者往往理解不了这几个属性之间到底什么关系,可以简单理解为一幅画。Content:画本身——Padding:画与画框的留白——Border:画框——Margin:画与画之间的距离。

IE和火狐在处理margin时有一些差别,倘若设定了父元素的高度height值,如果此时子元素的高度超过了父元素的height值,二则显示结果完全不同,IE会自动扩大,而火狐却不会!

当对块级元素应用宽度属性width,并将左右的外边距都设置为auto,可使块级元素水平居中,在实际工作中常用这种方式进行网页布局。

margin:0 auto; /*利用margin实现块级元素水平居中*/
margin:5px auto; /*利用margin实现块元素水平居中,并且上下拉开5像素边距*/

阴影属性

CSS3中的box-shadow属性可以轻松实现阴影的添加,其基本语法格式为:box-shadow:像素值1 像素值2 像素值3 颜色值 阴影类型;对于参数的说明:

  • 像素值1:表示元素水平阴影位置,可以为负值(必选属性)。
  • 像素值2:表示元素垂直阴影位置,可以为负值(必选属性)。
  • 像素值3:阴影模糊半径(可选属性)。
  • 像素值4:阴影扩展半径,不能为负值(可选属性)。
  • 颜色值:阴影颜色(可选属性)
  • 阴影类型:内阴影(inset)/外阴影(默认),可选属性。
<style type="text/css">
   img{  /*定义img标签的样式*/
    padding: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 10px 20px #1cb0c7 inset;
   }
</style>

CSS3中的box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框,其基本语法格式为:box-sizing:content-box/border-box;

  • content-box:浏览器对盒子模型的解释遵从W3C标准,当定义width和height时,它的参数不包括border和padding。
  • border-box:当定义width和height时,border和padding的参数值被包含在width和height之内。
<style type="text/css">
   .box1{
    width: 300px;
    height: 100px;
    padding-right: 10px;
    background: #f90;
    border: 5px solid #ccc;
    box-sizing: content-box;
   }
   .box2{
    width: 300px;
    height: 100px;
    padding-right: 10px;
    background: #f90;
    border: 5px solid #ccc;
    box-sizing: border-box;
   }
</style>
<div class="box1">content-box属性</div>
<div class="box2">border-box属性</div>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS盒子模型的相关属性 边框属性 边距属性 阴影属性》 发布于2020-04-28

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

4 + 5 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册