江苏龙网

  1. 主页 > 生活百科 > >

CSS是什么？这一篇全解，绝对有你想要的( 四 )

css


background-image 设置图像为背景

  • url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 图片地址
  • background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果
background-position 设置背景图像的位置坐标
  • background-position: center center; 图片置中，x轴center，y轴center
  • 1px -195px 截取图片某部分，分别代表坐标x，y轴
background-repeat 设置背景图像不重复平铺
  • no-repeat 设置图像不重复，常用
  • round 自动缩放直到适应并填充满整个容器
  • space 以相同的间距平铺且填充满整个容器
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background 简写
  • background: url("o_ns.png") no-repeat 0 -196px;
  • background: url("o_ns.png") no-repeat center bottom 15px;
  • background: url("o_ns.png") no-repeat left 30px bottom 15px;
5. 列表属性
list-style-type: 列表项标志的类型
  • none 去除标志
  • decimal-leading-zero; 02.
  • square; 方框
  • circle; 空心圆
  • upper-alph; & disc; 实心圆
list-style-image：将图象设置为列表项标志
list-style-position：列表项标志的位置
  • inside
  • outside
list-style：缩写
页面布局1. 边框
border-style：边框样式
  • solid 默认，实线
  • double 双线
  • dotted 点状线条
  • dashed 虚线
border-color：边框颜色
border-width：边框宽度
border-radius：圆角
  • 1个参数：四个角度应用
  • 2个参数：第一个参数应用于 左上、右下；第二个参数应用于 左下、右上
  • 3个参数：第一个参数应用于 左上；第二个参数应用于 左下、右上；第三个参数应用于右下
  • 4个参数：左上、右上、右下、左下（顺时针）
border: 简写
  • border: 2px yellow solid;
box-shadow：边框阴影
  • 第一个参数是左右位置
  • 第二个参数是上下位置
  • 第三个参数是虚化效果
  • 第四个参数是颜色
  • box-shadow: 10px 10px 5px #888;
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div {            border:2px solid;            border-radius:25px;            width: 140px;        }    </style></head><body>    <div>         点赞哦！dear.     </div></body></html>
CSS是什么？这一篇全解，绝对有你想要的

文章插图
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .radius1 {            display: inline-block;            width: 100px;            height: 100px;            background-color: yellow;            border-radius: 20px;        }        .radius2 {            display: inline-block;            width: 100px;            height: 100px;            background-color: red;            border-radius: 20px 35px;        }        .radius3 {            display: inline-block;            width: 100px;            height: 100px;            background-color: blue;            border-radius: 20px 35px 50px;        }        .radius4 {            display: inline-block;            width: 100px;            height: 100px;            background-color: green;            border-radius: 20px 35px 50px 60px;        }    </style></head><body>    <div>        <span class="radius1"></span>        <span class="radius2"></span>        <span class="radius3"></span>        <span class="radius4"></span>    </div></body></html>


推荐阅读


上一篇：尼斯湖水尼斯湖水怪 英国尼斯湖水怪传说

下一篇：发小和闺蜜哪个更重要 发小和闺蜜的意思一样吗