CSS（三）元素的修饰、背景设置

一、元素的修饰

1. 圆角——border-radius

       CSS中，任何元素都有四个角：

       圆角的取值：

       1个值：四个角相同

       2个值：左上右下、左下右上

       3个值：左上、右上左下、右下    

       4个值：左上、右上、右下、左下(顺时针)

border-radius: 10px;
border-radius: 10px 20px;
border-radius: 9px 5px 3px;
border-radius: 3px 10px 20px 30px;

2. 盒子阴影——box-shadow

       格式：box-shadow: x轴偏移 y轴偏移 羽化 扩展 颜色 内外阴影(可选,默认向外)

第一、二个值： x 轴上的偏移量和y轴上的偏移量（正负值）

第三个值：模糊半径的大小（羽化）不允许负值

第四个值：扩展半径的大小，向四周扩散相等的大小,正值放大，负值缩小

第五个值：颜色值

第六个值：阴影向内 inset：默认阴影向外扩散

box-shadow: 3px 5px 5px 1px green inset;

3. 光标的设置

4. 元素特有样式

（1）表单轮廓 outline

       格式：outline:width style color; 该属性常用与清空轮廓线。

outline: none;
outline: 0;

（2）列表样式 list-style

设置列表标识为小图片

  url( ) 使用绝对路径或者相对路径

  list-style-image: url(./img/列表图标.png);

list-style-position

设置标识在li的定位

  list-style-position: outside;  默认在 li 外

  list-style-position: inside;  默认在 li 里

二、背景

1. 背景颜色  background-color: 颜色色值;

2. 背景图片  background-image: url(路径);

       路径可以是绝对路径或者相对路径,注意外部 css 的路径，背景图必须要求元素具有宽度和高度。

背景图和img的区别：

img具有尺寸，不设置宽度高度，可以直接显示

背景图必须设置宽度和高度

img图片不可直接写文字，除非在img盒子外部定位

背景图是可以在图片上写文字，背景图其实和颜色一样

img一般用于产品展示，可以根据素材更新

背景图一般左大背景或者更新小图标

3. 背景图平铺

       如果宽高大于图片大小，图片会重复显示；如果宽高小于图片大小，图片会显示不全。

4. 背景图定位  background-position

       背景图定位取值可以是关键词，也可以为正值和负值，正值向右移动负值向左移动。

5. 背景图尺寸  background-size

       在拉伸方向中有宽度拉伸和高度拉伸两种，所以可以指定两个值background-size:x轴拉伸 y轴拉伸;

       注意在设置大图背景时最好限制最低宽度，这样低于预定宽度时就会出现横向拖拽条保证图片和内容显示完整。

6. 简写

       格式：background:color image repeat position;  四组值用空格分开,没有顺序；举例：

.uname {
   background-image: url(./img/yhm.png);
   background-repeat: no-repeat;
   background-position: right;
   background-size: auto;
   background-size: auto 100%;

简写后：

.uname {
   background: url(./img/yhm.png) no-repeat right/auto 100%;
}