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

二、背景

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%;
}


阅读量：571

点赞量：0

收藏量:0