MENU

CSS3圆角边框和盒子阴影

May 11, 2020 • Read: 72 • Note,CSS

圆角边框(CSS3)

  • 语法:
border-radius: xxpx;
  • 其中每一个值可以为 数值或百分比的形式。
  • 技巧: 让一个正方形 变成圆圈
border-radius: 50%;

示例:

代码:

.b1{
    width: 250px;
    height: 250px;
    border: 1px solid;
    border-radius: 50%;
    margin: 50px auto;
}
.b2{
    margin: 50px auto;
    width: 250px;
    height: 50px;
    border: 1px solid;
    border-radius: 25px ;
}

效果图矩形的圆角(即第二个图), 就不要用百分比,因为百分比会是表示高度和宽度的一半。
而我们这里矩形就只用高度的一半就好了。精确单位。

盒子阴影(CSS3)

  • 语法:
box-shadow:水平阴影 垂直阴影 模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  内/外阴影;
作用
h-shadow必须,水平阴影的位置
v-shadow必须,垂直阴影的位置
blur可选,模糊的距离
spread可选,阴影的尺寸
color可选,阴影的颜色
inset可选,将外部阴影改成内部阴影
  • 前两个属性是必须写的。其余的可以省略。
  • 外阴影 (outset) 是默认的,不需要写
  • 想要内阴影可以写 inset

div {
    width: 200px;
    height: 200px;
    border: 10px solid red;
    /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, 0.4);  */
    /* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色  内/外阴影; */
    box-shadow: 0 15px 30px  rgba(0, 0, 0, 0.4);
}

本站所有未注明转载的文章均为原创,并采用CC BY-NV-SA 4.0 授权协议,转载请注明来源。

Last Modified: June 5, 2020
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment