css3新增的样式一----圆角和盒子阴影

最新推荐文章于 2021-01-19 20:57:27 发布

weixin_43700362

最新推荐文章于 2021-01-19 20:57:27 发布

阅读量221

点赞数

分类专栏： css3 文章标签：圆角给盒子加阴影 css3新增样式

本文链接：https://blog.csdn.net/weixin_43700362/article/details/103517539

版权

css3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一圆角

经常用于轮播图下面的小圆点

说明：为了突出效果，尺寸比较大。

一个值

border-redius:50% （一个值的时候，四个角的水平和垂直半径。）
在这里插入图片描述
设置一个div ， border-radius: 50%;就可以了。


<style>
    .box{
        width: 100px;
        height: 100px;
        background: blue;
        border-radius: 50%; （或者50px也可以）
    }
</style>
<body>
    <div class="box">

    </div>
    
</body>
</html>

如果想要椭圆，那么div设置不同的宽高就可以了。

 .box{
        width: 200px;
        height: 120px;
        background: blue;
        border-radius:50%;
    }

在这里插入图片描述

两个值

border-radius: 50px 90px;
两个值的时候左上右下右上左下的水平和垂直半径
在这里插入图片描述

三个值

border-radius: 30px 90px 150px;
三值分别是：
左上右上左下右下的水平垂直的半径
在这里插入图片描述

四个值

border-radius: 30px 90px 50px 150px;
四个值分别是：
左上右上右下左下水平和垂直半径
在这里插入图片描述

注意

border-radius:最多可以有八个值，分别是
左上右上右下左下水平半径左上右上右下左下垂直半径

border-radius具体还可以划分为：
border-top-left-radius border-top-right-radius
border-bottom-left-radius border-bottom-right-radius

这四个属性，每个最多有两个值。
（ border-top-left-radius）
一个值的时候，表示左上角的水平和垂直半径
两个值的时候表示左上角的水平半径左上角的垂直半径（如下）

border-top-left-radius:30px 120px;

在这里插入图片描述

盒子阴影

外阴影

给一个div盒子设置外阴影

 .box{
        width: 200px;
        height: 120px;
       border: 5px solid red;
       margin-left: 200px;
       margin-top: 200px;
       box-shadow: 20px 20px 3px 5px greenyellow;
      
    }

在这里插入图片描述

   box-shadow: 20px 20px 3px 5px greenyellow;
  第一个值表示：
  阴影水平的位置  正值表示向右移动 负值表示向左移动  必须写
  第二个值表示：
  阴影垂直的位置  正值表示向下移动 负值表示向上移动  必须写
   第三个值表示：
   阴影模糊  不可以为负数
  第四个值表示：
  阴影的尺寸 可以为负数
  第五个值表示：
  阴影的颜色

内部阴影

box-shadow: 20px 20px 3px 5px greenyellow inset;
在这里插入图片描述
第六个值表示
内阴影还是外阴影
默认是外阴影。

多个阴影

中间用逗号隔开就好
box-shadow: 10px 10px 5px 5px greenyellow,15px 15px 3px 10px blue ;

在这里插入图片描述

weixin_43700362

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3新增的样式一----圆角和盒子阴影

一圆角经常用于轮播图下面的小圆点说明：为了突出效果，尺寸比较大。一个值border-redius:50% （一个值的时候，四个角的水平和垂直半径。）设置一个div ， border-radius: 50%;就可以了。<style> .box{ width: 100px; height: 100px; bac...
复制链接

扫一扫