css盒子边框、圆角、阴影、背景与渐变

边框

边框的三要素

线宽度、线型、线颜色

border: 1px solid #000;

线型（常见）：solid（实线）、dashed（虚线）、dotted（点状线）

 

边框的三要素小属性

border-width

border-style

border-color

 

四个方向的边框

border-top

border-right

border-bottom

border-left

 

四个方向边框的三要素小属性_用来层叠大属性

border-top -width

border-top -style

border-top -color

border-right -width

border-right -style

border-right -color

border-bottom -width

border-bottom -style

border-bottom -color

border-left -width

border-left -style

border-left -color

 

去掉边框

border-left：none；属性即可去掉左边框，以此类推

 

利用边框制作三角形

.box{

            width: 0;

            height: 0;

  /*  transparent 表示透明色*/

            border: 20px solid transparent;

            border-top-color: red;

        }

---

圆角

border-radius属性的值通常为px单位，表示圆角的半径

border-radius: 10px;

 

利用圆角制作圆形

border-radius属性的值=盒子width的一半

 

单独设置四个圆角

border-radius: 10px 20px 30px 40px;顺序为左上、右上、右下、左下（顺时针）

也可以用小属性_用来层叠大属性

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

 

百分比为单位：border-radius属性的值可以用百分比做单位，表示圆角起始于每条边的哪里

border-radius: 20%;

正圆形：正方形盒子设置的border-radius属性为50%

椭圆形：长方形盒子设置的border-radius属性为50%

---

盒子阴影

box-shadow属性

box-shadow: 10px 20px 30px rgba(0, 0, 0, .4); x偏移 y偏移 模糊量 颜色

 

阴影延展

box-shadow: 10px 20px 30px 40px rgba(0, 0, 0, .4); x偏移 y偏移 模糊量 阴影延展 颜色

40px是阴影延展

 

内阴影

box-shadow属性值前加inset单词，表示内阴影

box-shadow:inset 10px 20px 30px 40px rgba(0, 0, 0, .4);

 

多阴影

box-shadow属性可以用逗号隔开多个，表示携带多个阴影

box-shadow: 10px 20px 30px rgba(0, 0, 0, .4)，10px 20px 30px rgba(250, 0, 0, .6)，inset 10px 20px 30px 40px rgba(0, 0, 0, .4);

---

背景

背景颜色

background-color属性 背景颜色

背景颜色可以用十六进制、rgb（）、rgba（）表示法表示

注：padding区域有背景颜色

---

背景图片

background-image属性用来设置背景图片，图片路径要写到url（）圆括号中，可以是相对路径，也可以是http://开头的绝对路径。

 background-image: url(images/bg1.jpg);

注：如果样式表示外链式的，那么要书写从css出发到图片的路径，而不是从html出发

 

背景图片的重复模式

background-repeat属性用来设置背景的重复模式

值                意义

repeat；      x,y均平铺（默认值）

repeat-x；    x平铺

repeat-y；    y平铺

no-repeat；  不平铺

 

背景尺寸

background-size属性用来设置背景图片的尺寸，兼容到IE9

background-size: 100px 200px;  宽度100像素，高度200像素

值也可以用百分数来设置，表示为盒子宽、高的百分之多少

需要等比例设置的值，写auto

background-size: 100px auto;

 

contain和cover是两个特殊的background-size属性的值

contain：将背景图片智能改变尺寸以容纳到盒子里：让用户看完整整张图片，不管盒子满不满

cover：将背景图片智能改变尺寸以撑满盒子：让用户看到盒子被图片盖满，不管图片完不完整

 

背景裁切

background-clip属性用来设置元素的背景裁切到哪个盒子，兼容到IE9

值                             意义

border-box              背景延伸至边框（默认值）

padding-box             背景延伸至内边（padding），不会绘制到边框（仅在dotted、dashed边框可察觉）

content-box             背景被裁减至内容区

 

背景起源：

background-origin: content-box;

 

背景固定

background-attachment属性决定背景图像的位置在视口内固定，或者随着包含它的区块滚动

值           意义

fixed       自己滚动条不动，外部滚动条不动

local       自己滚动条动，外部滚动条动

scroll      自己滚动条不动，外部滚动条动（默认值）

 

背景图片位置

background-position属性可以设置背景图片出现在盒子的什么位置

background-position: 100px 200px;

可以用top、bottom、center、left、right描述图片出现的位置

background-position: center center;

 

css精灵

将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫做css精灵，也叫做css雪碧图

css精灵可以减少HTTP请求数，加快网页显示速度。缺点就是不方便测量，后期改动麻烦

 

background综合属性

一些常用的背景相关小属性可以合写到一条background属性中

background: white url(images/IMG_0063.JPEG) no-repeat center center;

---

线性渐变

盒子的background-image属性可以用linear-gradient（）形式创建线性渐变背景

background-image: linear-gradient(to right,blue,red);渐变方向，开始颜色，结束颜色

渐变方向也可以写成度数

background-image: linear-gradient(45deg,blue,red);deg表示度数

可以有多个颜色值，并且可以用百分数定义它们出现的位置

background-image: linear-gradient(to right,blue,yellow 20%，red);

浏览器私有前缀

不同浏览器有不同的私有前缀，用来对试验性质的css属性加以标识

品牌	前缀
Chrome	-webkit-
Firefox	-moz-
IE、Edge	-ms-
欧朋	-o-

 

径向渐变

盒子的background-image属性可以用radial-gradient（）形式创建径向渐变背景

background-image: radial-gradient(50% 50%,blue,red);