css常用样式

时间:2023-03-09 23:09:08
css常用样式

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;}
        背景色   背景图片  平铺方式  定位