css

1.边框圆角

.box{

width: 300px;

height: 300px;

border:3px solid red}

四个值：border-radius：10px 20px 30px 40px；

顺时针设置圆角的大小，左上 右上 右下 左下。

三个值：border-radius：10px 20px 30px；

左上角是10px 右上角和左下角是20（对角线） 右下角是30

两个值：border-radius: 20px 50px;

表示左上角和右下角是20（对角线）右上角和左下角是50px（对角线）

一个值：border-radius: 20px；

表示四个角都是20px

2.阴影

box-shadow: inset x-offset y-offset blur-radius color;

inset 阴影类型内阴影 outset 阴影类型外阴影

x-offset X轴位移，指定阴影水平位移量

y-offset Y轴位移，用来指定阴影垂直位移量

color 阴影颜色

3.背景图片

background-size: 200px 400px; 第一个值是宽  第二个是高

如果只给出一个值，第二个是设置为"auto(自动)"

.box1{

            width: 200px;

            height: 400px;

            background: url();  }

          border:10px dashed red;

          padding:20px;}

背景图像会贴着内边距的内部来展示 

background-origin:padding-box;

背景图像会贴在边框的内部来展示 

 background-origin:border-box; 

背景图像会贴在内容的内部来展示 

background-origin:content-box; 

  .box2{

            width: 200px;

            height: 400px;

            background: url();

            border:10px dashed rgba(240,58,23,0.5);

            padding:20px; }

           

背景被裁剪到内边距框 

background-clip:padding-box;

背景被裁剪到边框盒 

background-clip:border-box; 

背景被裁剪到内容框 

background-clip: content-box;