CSS基础：圆角边框，盒子和文字阴影

最新推荐文章于 2024-07-23 14:07:14 发布

小猪弟

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： css 圆角边框盒子阴影文字阴影 border-radius

本文链接：https://blog.csdn.net/u011863822/article/details/123273562

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

圆角边框

什么是圆角边框呢？这个不说话而是先看图片：

在这里插入图片描述

图中的标记的地方，不是图片而是通过圆角边框进行设置得到的。现在如何实现这个使用格式如下：

border-radius:数值 | 百分数

数值：用长度值定义圆形半径或椭圆的半长轴，半短轴。不允许负值
百分比：用百分比定义圆形半径或椭圆的半长轴，半短轴。水平方向百分比参照元素宽度（非内容宽度），垂直方向参照元素高度。不允许负值。

现在演示一下（为了证明是自己写的，所以颜色就不与原图一样了）：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
 div{
  width: 50px;
  height: 20px;
  background-color: darkmagenta;
  border-radius:10px;
  font-size: 10px;
  line-height: 20px;
  text-align: center;
 }
 </style>
</head>
<body>
<div >
特卖价
</div>
</body>
</html>

在这里插入图片描述

看见这个就需要想了这个原理是什么？

border-radius 属性提供 2 个参数，参数间以(/)，如第 2 个参数值省略未定义，则直接复制第 1 个参数值。

在这里插入图片描述

当然也因为有四个角所以可以拆分为四个：

.demo {
    border-top-left-radius: 数值 |百分比[/ 数值 |百分比 ];
    border-top-right-radius: 数值 |百分比[/ 数值 |百分比 ];
    border-bottom-right-radius: 数值 |百分比[/ 数值 |百分比 ];
    border-bottom-left-radius: 数值 |百分比[/ 数值 |百分比 ];
}

当然也可以复合写法：但是为了方便每个后面的值只用一个不用两个了。

参数组个数	描述
border-radius： 10px	所有的边角使用的都是圆10px截取
border-radius： 10px 20px	左上和左下是10px 左下和左上为20px
border-radius： 10px 20px 30px	左上10px 右下30px 左下和右上 20px
border-radius： 10px 20px 30px 40px	依次为左上左下右上右下

例子：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
  ul{margin:0;padding:0;}
  li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}
  .test .one{border-radius:10px;}
  .test .two{border-radius:10px 20px;}
  .test .three{border-radius:10px 20px 30px;}
  .test .four{border-radius:10px 20px 30px 40px;}
 </style>
</head>
<body>
<ul class="test">
 <li class="one">提供1个参数<br />border-radius:10px;</li>
 <li class="two">提供2个参数<br />border-radius:10px 20px;</li>
 <li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li>
 <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li>
</ul>
</body>
</html>

在这里插入图片描述

补充：如果想要某侧为完全的圆弧，只允许让这个设置值是其一半即可。

盒子阴影

在CSS3中增加了盒子阴影，格式如下：

box-shadow : h-shadow v-shadow [ blur  spread  color inset];

值	描述
h-shadow	必须有参数 ,水平阴影位置，允许负数（默认向右，负数为左），
v-shadow	必须有参数 ,垂直阴影位置。允许负数（默认向下，负数为上），
blur	可选参数，模糊距离。
spread	可选参数，阴影的尺寸。
color	可选参数，模糊颜色。
inset	可选参数，将外部阴影（outset）改为内部阴影。

注意：默认是outset，也不用写也可以写不然会报错。

盒子阴影不占用空间，不会影响其它盒子的排序

演示：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
  div{
   width: 50px;
   height: 50px;
   background-color: #d10000;
  }
  /*默认是黑色，所以修改其颜色为灰色*/
  .c1{
   box-shadow: 5px 10px gray;
  }
   /*估计让数值大，其可以演示阴影不会影响盒子的大小 */  
  .c2{
   box-shadow: -5px -30px green;
  }
  .c3{
   box-shadow: 5px 10px 5px gray;
  }

   .c4{
   box-shadow: 5px 10px 5px 10px gray;
  }
    .c5{
   box-shadow: 5px 10px  gray inset;
  }

  .c6{
   box-shadow: 5px 10px 1px rgba(0,0,255,0.2) inset;
  }

 </style>
</head>
<body>
<div class="c1"></div>
<hr/>
<div class="c2"></div>
<hr/>
<div class="c3"></div>
<hr/>
<div class="c4"></div>
<hr/>
<div class="c5"></div>
<hr/>
<div class="c6"></div>
</body>
</html>

在这里插入图片描述

文字阴影

这个和盒子阴影很相似，如下：

text-shadow: h-shadow v-shadow [ bur color ];

这个是四个值其意思和盒子阴影一样。

值	描述
h-shadow	必须有参数 ,水平阴影位置，允许负数（默认向右，负数为左），
v-shadow	必须有参数 ,垂直阴影位置。允许负数（默认向下，负数为上），
blur	可选参数，模糊距离。
color	可选参数，模糊颜色。

例子：

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <title>我的文档</title>
 <style type="text/css">
  h4{
    text-shadow: 2px 2px  1px rgba(0,0,255,0.3);
  }


 </style>
</head>
<body>
 <h4>仇恨不会随着时间的流逝而被稀释，而如果酿制的酒一样变得愈加醇厚，令人深入灵魂。</h4>
</body>
</html>

在这里插入图片描述

小猪弟

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
CSS基础：圆角边框，盒子和文字阴影

圆角边框什么是圆角边框呢？这个不说话而是先看图片：图中的标记的地方，不是图片而是通过圆角边框进行设置得到的。现在如何实现这个使用格式如下：border-radius:数值 | 百分数数值：用长度值定义圆形半径或椭圆的半长轴，半短轴。不允许负值百分比：用百分比定义圆形半径或椭圆的半长轴，半短轴。水平方向百分比参照元素宽度（非内容宽度），垂直方向参照元素高度。不允许负值。现在演示一下（为了证明是自己写的，所以颜色就不与原图一样了）：<!DOCTYPE html>&lt
复制链接

扫一扫

专栏目录