html学习过程（1）

发表于 | 分类于 ，

box-shadow属性

box-shadow属性向框添加一个或多个阴影。
语法如下

1
box-shadow: h-shadow v-shadow blur spread color inset;

值 属性
h-shadow 必需。水平阴影的位置，默认向右，允许负值
v-shadow 必需。垂直阴影的位置，默认向下，允许负值
blur 可选。模糊距离
spread 可选。阴影的尺寸
color 可选。阴影的颜色
inset 可选。将外部阴影转换为内部阴影 
1
2
3
4
5
6
.div{
	width: 300px;
	height: 300px;
	border: 1px solid red;
	box-shadow: 5px 5px 5px 5px blue;
}

显示的样式如图1所示

图1

outline属性

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline不会占据空间，也不一定是矩形！
语法与border相同。

1
outline:1px solid red;

rem

在rem出现前，px以及em都是常见的web页面布局的单位。而rem则是为了响应式布局而诞生的新型web布局单位。
em是以父元素为基本大小的值，他的实际大小是：

1
实际大小 = 父元素的px值  *  em值

rem中的“r”就是root的意思，意为rem是以根元素为基本大小的值，他的实际大小是：

1
实际大小 = 根元素的px值 * rem值

CSS3文本效果

主要是以下三个

+ text-stroke-width：设置或检索对象中的文字的描边厚度。
+ text-stroke-color：设置或检索对象中的文字的描边颜色 。
+ text-fill-color：文本填充颜色。可设置透明值。

CSS3渐变效果

1
2
3
4
/* 两个必须参数  */
background-image: linear-gradient(orange,green);
/* 增加一个方位 */
background-image: linear-gradient(to top,orange,green);

显然只能通过top,left,right和bottom来实现渐变的方向会显得比较单一，因此也可以使用角度(deg)来设置方位。设置的角度会随着逆时针方向增加，且角度可以是负值。

1
2
background-image: linear-gradient(45deg,orange,green,blue,red);
/* 通过角度实现多种颜色的渐变效果 */

显示如图

显示结果

也可以使用颜色的透明度来实现更高的渐变效果

1
2
background-color: green;
background-image: linear-gradient(to top right, rgba(0,255,0,0.6), rgba(0,0,255,0));

设置透明度实现颜色渐变

还有就是关于CSS渐变的径向渐变

1
background-image: radial-gradient(circle, red, green);

径向渐变

还可以设置形状的发散方向。

1
background-image: radial-gradient(circle at top, orange, green);

top,right,bottom,left以及center分别表示五个方向的发散。

CSS3边框图片效果

  1. border-image-source：引入背景图片地址
  2. border-image-slice：切割引入背景图片
  3. border-image-width：边框图片的宽度
  4. border-image-repeat：边框背景图片的排列方式
  5. border-image-outset：边框背景向外扩张
  6. border：以上五个属性的简写方式

首先是设置div的宽和高各位400px，然后是边框图片的引入

1
border-image-source: url('border.png');

如果仅仅只是引用了边框图片而没有设置边框图片的宽度，在浏览器中是不能显示的。添加border-image-width: 81px;之后，能够正常显示

添加了边框图片宽度之后

注意：边框图片的宽度并不是边框的宽度，边框图片的宽度不会挤压文字，也就是说文字会显示在边框图片之上，而设置了边框宽度则会挤压文字。

1
border-image-slice: 27;

设置边框图片切割属性之后