CSS之圆角和阴影

最新推荐文章于 2024-04-21 10:40:16 发布

一直学习的程序员L

最新推荐文章于 2024-04-21 10:40:16 发布

阅读量863

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_45604020/article/details/131413907

版权

css圆角和阴影

一、圆角
二、正圆
三、胶囊形状
四、阴影

一、圆角

在日常生活中我们可以看到很多主流网站都使用了圆角和阴影，目的是为了增加视觉效果，让看起来图片更饱满立体。

在这里插入图片描述

语法：从左上角开始顺时针赋值，没有的值与对角相等。

取值个数	示例	含义
一个值	border-radius: 8px;	四个角均为10px
两个值	border-radius: 80px 10px;	左上+右下：80px；右上+左下：10px
三个值	border-radius: 10px 40px 80px;	左上：10px；右上+左下：40px；右下：80px
四个值	border-radius: 10px 20px 40px 80px;	左上：10px；右上：20px；右下：80px；左下：80px

拓展：border-radius的属性值其实就是圆角的半径

在这里插入图片描述

<style>
   img{
       border-radius: 8px;
       /*border-radius: 80px 10px;*/
       /*border-radius: 10px 40px 80px;*/
       /*border-radius: 10px 20px 40px 80px;*/
   }
</style>
<body>
    <img src="/img/xz.jpeg" c>
</div>

运行截图

二、正圆

日常生活中我们经常看到头像一般都设置成正圆形状，这样匀称且好看。

在这里插入图片描述

语法：给正方形盒子设置圆角属性值为宽高的一半或直接写50% （注意所设置的图像一定是正方形否则无法出现正圆）

<style>
   img{
      width: 200px;
      height: 200px;
      /*宽高的一半*/
      /*border-radius: 100px;*/
      /*50%*/
      border-radius: 50%;
   }
</style>
<body>
    <img src="/img/xz.jpeg" c>
</body>

在这里插入图片描述

三、胶囊形状

很多时候我们可以看到许多按钮经常设置成胶囊形状

语法：给长方形设置圆角属性为盒子高度的一半

<style>
  div{
     width: 200px;
     height: 100px;
     background-color: #fd6701;
     border-radius: 50px;
   }
</style>
<body>
    <div></div>
</body>

在这里插入图片描述

四、阴影

很多网站的效果图都会设置阴影，这样子不仅显得更有层次而且还添加立体效果

在这里插入图片描述

语法： box-shadow：X 轴偏移量 Y 轴偏移量模糊半径扩散半径颜色内外阴影
注意：
• X 轴偏移量和 Y 轴偏移量必须书写
• 默认是外阴影，内阴影需要添加 inset

    <style>
        div{
            width: 300px;
            height: 300px;
            margin: 50px auto;
            background-color: rgb(44, 80, 95);
            box-shadow: 10px 10px 30px 10px rgba(0, 0, 0, 0.76);
            text-align: center;
            line-height: 300px;
            color: white;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>阴影</div>
</body>

在这里插入图片描述

一直学习的程序员L

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS之圆角和阴影

在日常生活中我们可以看到很多主流网站都使用了圆角和阴影，目的是为了增加视觉效果，让看起来图片更饱满立体。很多网站的效果图都会设置阴影，这样子不仅显得更有层次而且还添加立体效果。日常生活中我们经常看到头像一般都设置成正圆形状，这样匀称且好看。很多时候我们可以看到许多按钮经常设置成胶囊形状。
复制链接

扫一扫