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;}
        背景色   背景图片  平铺方式  定位
原文地址:https://www.cnblogs.com/zhongqiwei/p/5764371.html