border样式

border样式

1. border-radius

//顺时针四个角顺序，左上角开始
//两个值时，第一个值代表左上和右下，第二个代表右上和左下
//三个值代表，第一个值代表左上，第二个代表右上和左下，第三个代表右下

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-left-radius:30px;
border-bottom-right-radius:40px;

border-top-left-radius:10px 20px;
border-top-right-radius:20px 30px;
border-bottom-left-radius:30px 40px;
border-bottom-right-radius:40px 50px;
//加到100以上没有意义，第一个值是圆的水平半径，第二个值是垂直半径

border-radius:10px 20px 30px 40px / 10px 20px 30px 40px;
//这种写法第一个和后面第一个对应，也是和上面一样的样式。

2. border-shadow

//第一个值，水平偏移量，第二个是垂直偏移量，
第三个是模糊范围，第四个是传播距离(阴影水平和垂直方向同时增加的距离)，
最后可以设置颜色（注：负值是相反方向），
可以设置多个阴影，第一个设置的阴影在逻辑的最上面。
分外阴影和内阴影，内阴影加inset。

border-shadow:inset 0px 0px 10px #fff,
                    3px 0px 10px #f0f
                    0px -3px 10px #0ff
                    -3px 0px 10px #ff0
                    0px 3px 10px #ff0;
                //重复设置可以加重阴影

3. border-image

//属性：source slice width outset repeat

1. slice分割线,只能填数字和百分比，分割线四条，top right bottom left，最后可以加fill，意思是内容区可以填充。
2. outsize背景图片往外延伸
3. width默认值是1，显示border展示图片展示的区域宽度，这里的1是border-width的一倍的意思，也可以填auto，拿slice来作为像素来填写。
4. source，背景来源，可以写颜色可以URL引入图片。
5.repeat stretch拉伸（默认） repeat平铺 round（当不满足整数平铺，就拉伸，当可以整数平铺就添加） space

 border-image：source slice repeat；

4. background

background-image可以填多个url多个图片

linear-gradient，线性渐变
radial-gradient,放射性渐变一个圆形点向外扩散

• background-position定位相对于origin的值的左顶点来定位，左右，左右默认center。
• background-origin（默认是padding-box）//border-box,padding-box,content-box 只规定从哪开始渲染，没规定从哪结束渲染，设置了no-repeat后padding和border不会被填充，所以上左padding和border不会渲染，但是下面的padding和border会被渲染。
• background-clip（默认值border-box）//border-box,padding-box,content-box text 设置padding-box会让背景图片在padding以外不能显示背景图片，content以外不能显示背景图片。
  text（兼容性只有webkit兼容） 出了文字体外都不能展示背景图片，但是需要配合-webkit-text-fill-color：transparent；和text-fill-color:transparent;这个属性就是为了这个效果设置的。
• background-attachment 改变图片默认定位属性，平时默认图片是根据容器定位的，容器不动，图片不动。这给属性如果值是local，那么背景图片是相对于内容进行定位，图片会跟着内容走。fix属性值相对于可视区视口定位，可视区永远都不会动所以图片不会动，若超出了内容区那么图片将不会显示。
• backgroun-size cover属性值，是一张图片填满整个容器，不改变图片的原始比例，即使溢出容器。 contain 再不改变原来的图片的比例下，让容器包含一张完整原始比例的图片，即使会填不满。
• background-repeat repeat stretch拉伸（默认） repeat平铺 round（当不满足整数平铺，就拉伸，当可以整数平铺就添加） space，可以填2个值，分左右。
• border-color如果不设置边框的颜色，那么css中会默认有一个currentColor储存字体color的颜色，然后给border-color使用。