1.box-sizing
简而言之,盒子模型是是由(margin-padding-border-盒子宽高)组成的,其中我们可见的盒子样式是不包含margin的;
而box-sizing的作用是用来设置盒子尺寸的计算方式(设置width和height的作用)
举一个简单的例子:
可以看到该盒子的大小为160*160 这里指的是默认的:content-box
默认值,宽度和高度用来设置内容区的大小
如果加上
box-sizing: content-box;
此时盒子向内凹陷;这是侯width和height的值就是盒子的大小而border是向内延申的。
2.Outline用法
它的定义和border差不多只是它不影响可见框的大小既是下面的字体会被阻挡
3.box-shadow用法
它的四个值分别定义不同的概念
box-shadow:20px 0px 0px red;
第一个值定义水平偏移及阴影会向右边移动
第二个定义垂直则会向下方移动
第三个定义模糊值,值越高越模糊
第四个显而易见就是颜色
4.boder-radius
border-radius
属性使一个元素的外边框边缘的角变圆;
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-radius
可以分别指定四个角的圆角
- 四个值:
左上
右上
右下
左下
- 三个值:
左上
右上/左下
右下
- 两个值:
左上/右下
右上/左下
- 一个值:
左上/右上/右下/左下
其画⚪的方法以20px的原为例子就是这样的
border-top-left-radius: 20px;
而椭圆则是
只需要对上述样式对一点点的改动,设置width
和height
属性不相等即可
border-top-left-radius: 10px 20px;
画⚪:50%
border-radius: 50%;