CSS属性学习

一、边框

1. 三个属性：

（1）添加圆角：border-radius；

（2）添加阴影：box-shadow；

（3）绘制图片边框：border-image；

{
  width:300px;
  height:100px;
  background-color:pink;
  box-shadow: 10px 0 #999999;
}

{
  width:300px;
  height:100px;
  background-color:pink;
  box-shadow: 0 10px #999999;
}

（3）blur 模糊距离

{
  width:300px;
  height:100px;
  background-color:pink;
  box-shadow: 0 0 10px #999999;
}

效果：

（4）spread 阴影尺寸

{
  width:300px;
  height:100px;
  background-color:pink;
  box-shadow: 0 0 0 10px #999999;
}

效果：

（5）外部阴影 (outset) 改为内部阴影。

{
  width:300px;
  height:100px;
  background-color:pink;
  box-shadow: 10px 0 0 0 #999999 insert;
}

效果：

总结：

spread是阴影向四周都扩大某一值。

最后附一张原理图：

参考文章：www.html.cn/archives/93…

3. 绘制图片边框：border-image

奉上张鑫旭博客一篇：www.zhangxinxu.com/wordpress/2…

凹凸实验室：aotu.io/notes/2016/…

这个属性太抽象了，目前只是一知半解，以后熟练了再总结。

二、背景

1、主要属性：

• 背景颜色：background-color
  
• 背景图片：background-image
• 图片位置：background-position
• 规定背景图片的尺寸：background-size(3)
• 如何重复背景图像：background-repeat
  
• 规定背景图片的定位区域：background-origin(3)
• 规定背景的绘制区域：background-clip(3)
• 设置背景图像是否固定或者随着页面的其余部分滚动：background-attachment

备注：简写时顺序如上。

2、背景图片(background-image)

想说一点，一个元素可以添加多个背景图。下面是两种不同的写法，效果一样。

#example1 {
    background: url(paper.gif) right bottom no-repeat,
                url(img_flwr.gif) right bottom no-repeat;
    background-color:#99FFCC;
}

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, right bottom;
    background-repeat: no-repeat, no-repeat;
    background-color:#99FFCC;
}

 效果：

3、规定背景图片的尺寸(background-size)

属性值：

• contain：保持纵横比，最大大小（图片是完整的）
  
• cover：保持纵横比，最小大小（图片可能会有裁剪）
• length
  
• percentage

总结：一般结合background-position使用，

例：

{
	background:url(img_flwr.gif);
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center center;
}

效果：

{
	background:url(img_flwr.gif);
	background-size:cover;
	background-repeat:no-repeat;
	background-position: center center;
}

效果:

4、如何重复背景图像(background-repeat)

属性值：

• no-repeat
• repeat
• repeat-x
• repeat-y

5、规定背景图片的定位区域(background-origin)

6、规定背景的绘制区域（background-clip）

7、background-attachment

三、文本效果