css圆角、阴影及图片定位

圆角

 border-radius是向元素添加圆角边框。

使用方法：

border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 

---

border-top-left-radius: top边半径 left边半径;

border-top-right-radius: top边半径 right边半径;

border-bottom-left-radius: bottom边半径 left边半径;

border-bottom-right-radius: bottom边半径 right边半径;

border-radius：上左  上右  右下  左下；

border-radius：10px 20px; 上左 右下为10px,  上右 左下为20px；

border-radius：10px / 20px; top边10px,  left边为20px；

border-radius：1px 2px 3px 4px / 5px 6px 7px 8px;   top / left

阴影

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

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

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

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

color 阴影颜色

背景图片

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; 
————————————————
版权声明：本文为CSDN博主「Changkaix」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Changkaix/article/details/123953035