border: border-width border-style border-color (边框属性)
全部属性
div
{width:100px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#ccc;} 缩写属性
div
{width:100px;
height:100px;
border:1px solid #ccc;
}
border-radius 圆角效果
div
{border-radius:30px;}
所有边框角度设置为30px的圆角 div
{border-radius:50%}
一个圆
border-image 边框图片
div
{border-images: url(图片路径) ; }
box-shadow 盒子阴影
div {
width: 100px;
height: 100px;
background-color: #ff0000;
box-shadow: 5px 5px rgba(0, 0, 0, .6); }
<div>
<box-shadow></box-shadow>
</div>
外阴影效果
line-height(行高) text-indent(段落缩进) text-align(段落对齐)
p { line-height: 10px;
text-indent:2em; /*缩进两个字符*/
text-align:center;} /*段落居中对齐*/
letter-spacing(文字间距)
p
{ letter-spacing :10px;}
background-color
div
{ background-color:#ff0000;}
RGBA(RGB色彩标准,A为透明参数)
div
{background-color:#200, 69, 88, 0.5}
红 绿 蓝 透明参数
linear-gradient(渐变色彩)
div
{width: 400px;
height: 400px;
background-image:linear-gradient(to left, red 30%,blue);}
线性渐变 从右到左 30%的红 到蓝
background-image(背景图片) background-repeat(平铺方式)
div
{background-image:url(图片路径);
background-repeat: repeat-x;
} 平铺方式:x轴平铺
background-position(背景定位)
div
{background-position:left top;}
左对齐 上对齐
background(缩写)
div
{background:#EDEDED url(图片路径) no-repeat 50% 30px;}
背景色 背景图片 平铺方式 定位