box-shadow和颜色渐变

box-shadow和颜色渐变

双引号实现的元素(内联元素)
             blockquote:before{content:open-quote}   显示双引号的前半部分
             blockquote:after{content:open-quote}   显示双引号的后半部分
            可以在大括号里设置双引号的字体属性



背景图片边框的设置
                  border-image:url( )30(注意其后不跟单位,默认为px)steetch(可以不写,默认拉伸)
             取值是从上、右、下、左的顺序,如30 30 30 30,repeat(重复) round(平铺)——两者的显示效果一样
             若不取值,这只会在边框的四个角显示图片

范例:
<!DOCTYPE html>
<html>
<head>
	<title>border</title>
	<meta charset="utf-8">
	<style type="text/css">
	.div_border-img{
		width: 200px;
		height: 100px;
		background: #e43;
		/*border:30px solid; */
		border-width: 30px;
		border-image: url(11.jpg) 15 30 30 30 repeat;
	}
	</style>
</head>
<body>
	<div class="div_border-img"></div>
</body>
</html>


阴影设置
         border-shadow:0 0 0 red;(左右、上下、模糊度,不能用百分比取值)
      border-shadow:0 0 0 0 red;(第四个值是放大缩小,负缩小,正放大)
     当要有多个阴影时,用逗号隔开再进行取值





颜色渐变的设置
background:-webkit-gradient(linear,0,0,0%,50%,from(color),to(color);)  (第一个取值为倾斜度渐变deg角度单位,第二个取值为长度渐变,px为单位)
简写:background:linear-gradient(red,yellow)    linear为线性变化颜色,从red渐变为yellow
      background:linear-gradient(2deg,red 20px,yellow)  颜色也可以用rgb(2 2 2)或是rgba(2 2 2 30)为透明取颜色 (里面的第四个取值为透明度取值)
         linear为线性变化,radial为不均匀变化
         可以增加多个颜色,注意后面的百分比 > 前面的百分(百分比写在颜色的后面)

css布局注意事项
1、先要有总体布局思路,脑子不要混乱
2、再进行小块小块的布局,要进行计算长和宽(学会使用百分比100%的应用)
3、要心平气和的,不要浮躁

你可能感兴趣的:(box-shadow和颜色渐变)