前端学习(二十一) 盒模型二(css)

border-radius

border-radius:20px 30px/40px 50px;

左上和右下的水平半径为20px,右上和左下的水平半径为30px

左上和右下的垂直半径为40px,右上和左下的垂直半径为50px

这是一个椭圆半角


overflow

对块元素内的内容如果超出时进行一个裁剪


box-sizing

更改用于计算元素宽度和高度的默认的css盒模型

盒模型的宽度=width+padding+border

盒模型的高度=height+padding+border

box-sizing:content-box|border-box

content-box:默认值

padding+border+width=盒子的实际宽度

padding+border+height=盒子的实际高度

border-box:

width=盒子的实际宽度

height=盒子的实际高度


box-shadow,可以都有多个以“,”分开,x轴 y轴 模糊半径 阴影大小 颜色

inset:内阴影

box-shadow: inset 3px 3px 10px 10px red,3px 3px 3px 3px blue;


outline,轮廓(注意,IE的兼容不是很好)

和border基本类型,主要区别是outline不占空间,不影响布局,是悬浮于内容之上的,border占据空间

猜你喜欢

转载自blog.csdn.net/zy21131437/article/details/80867836
今日推荐