HTML及CSS学习笔记 11 - 盒子的边框和阴影

最新推荐文章于 2024-07-17 18:39:50 发布
最新推荐文章于 2024-07-17 18:39:50 发布
阅读量1.5k 收藏 16
点赞数 1
分类专栏： HTML及CSS学习笔记 文章标签： CSS 边框圆角 盒子阴影 border-radius box-shadow
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cgl125167016/article/details/90217115
版权

本文是HTML及CSS课程的第十一课。主要介绍的内容为，CSS中如何给盒子添加圆角边框及如何给盒子添加阴影

文章目录

一、边框圆角

1、如何添加边框圆角

在之前的章节里，我们了解到边框是盒子模型中的一个组成部分，并且通过CSS中border系列属性可以为盒子设置边框的宽度、风格、颜色。在CSS中，还可以利用border-radius属性，为盒子的边框设置圆角。

2、案例

2.1、案例1 - 给盒子的四角分别设置边框圆角

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 给盒子的四角分别设置边框圆角 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d {
        height: 100px;
        width: 250px;
        margin: 20px auto;
        background-color: lightsalmon;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
      }
    </style>
  </head>
  <body>
    <div class="d"></div>
  </body>
</html>

页面浏览效果：
给盒子的四角分别设置边框圆角
说明：

  • 可以针对盒子的四个角分别设置边框圆角，例子中的15px表示圆角半径为15像素。使用的属性说明如下：
    属性说明
    border-top-left-radius设置左上角边框圆角
    border-top-right-radius设置右上角边框圆角
    border-bottom-right-radius设置右下角边框圆角
    border-bottom-left-radius设置左下角边框圆角

2.2、案例2 - 统一设置边框圆角为同一个值

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 统一设置边框圆角为同一个值 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d {
        height: 100px;
        width: 250px;
        margin: 20px auto;
        background-color: lightsalmon;
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <div class="d"></div>
  </body>
</html>

页面浏览效果同上一个案例，这里不再展示。
说明：

  • 使用border-radius属性可以设置盒子的四个边框圆角为同一个值。本例中是border-radius: 15px;，表示盒子的四个边框圆角半径均为15像素。

2.3、案例3 - 按顺时针顺序设置边框圆角

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 按顺时针顺序设置边框圆角 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d {
        height: 100px;
        width: 250px;
        margin: 20px auto;
        background-color: lightsalmon;
        border-radius: 10px 15px 20px 25px;
      }
    </style>
  </head>
  <body>
    <div class="d"></div>
  </body>
</html>

页面浏览效果：
按顺时针顺序设置边框圆角
说明：

  • 使用border-radius属性按顺时针方向设置盒子的四个边框圆角，顺序依次为左上角、右上角、右下角、左下角。本例中border-radius: 10px 15px 20px 25px;设置左上角边框圆角半径为10像素，右上角边框圆角半径为15像素，右下角边框圆角半径为20像素，左下角边框圆角半径为25像素。

2.4、案例4 - 使用百分比设置边框圆角

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 使用百分比设置边框圆角 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d {
        height: 100px;
        width: 250px;
        margin: 20px auto;
        background-color: lightsalmon;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="d"></div>
  </body>
</html>

页面浏览效果：
使用百分比设置边框圆角
说明：

  • 使用百分比的形式设置边框圆角，百分比为圆角半径占width和height属性值的比例。本例中border-radius: 50%;表示四个边框圆角的横轴半径和纵轴半径分别width和height的50%，于是会得到一个椭圆。

2.5、案例5 - 按横轴半径/纵轴半径设置边框圆角

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 按横轴半径/纵轴半径设置边框圆角 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d {
        height: 100px;
        width: 250px;
        margin: 20px auto;
        background-color: lightsalmon;
        border-radius: 100px/40px;
      }
    </style>
  </head>
  <body>
    <div class="d"></div>
  </body>
</html>

页面浏览效果：
按横轴半径/纵轴半径设置边框圆角
说明：

  • border-radius属性的值用/分开，前面的值表示圆角横轴半径，后面的值表示圆角纵轴半径。本例中border-radius: 100px/40px;表示边框四个圆角的横轴半径均为100像素，纵轴半径均为40像素。

二、盒子阴影

1、如何添加盒子阴影

在CSS中，可以通过box-shadow属性为盒子添加阴影，该属性的语法格式如下：

box-shadow : [inset]  横向偏移量  纵向偏移量  [模糊范围]  [扩展范围]  [阴影颜色]

2、案例

2.1、案例1 - 简单的盒子阴影

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 简单的盒子阴影 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d {
        height: 100px;
        width: 250px;
        margin: 20px auto;
        background-color: lightsalmon;
        box-shadow: 5px 5px 5px lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="d"></div>
  </body>
</html>

页面浏览效果：
简单的盒子阴影
说明：

  • 本例中box-shadow: 5px 5px 5px lightgreen;表示为盒子添加一个向右偏移5像素，向下偏移5像素，模糊范围为5像素，颜色为lightgreen的阴影。

2.2、案例2 - 内阴影

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 内阴影 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d {
        height: 100px;
        width: 250px;
        margin: 20px auto;
        background-color: lightsalmon;
        box-shadow: inset 5px 5px 5px lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="d"></div>
  </body>
</html>

页面浏览效果：
内阴影
说明：

  • 设置了inset时，显示为内阴影，不设置inset时，显示为外阴影（投影）。
  • inset也可以写在所有属性值的最后，如：
    box-shadow: 5px 5px 5px lightgreen inset;

2.3、案例3 - 偏移量为负值

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 偏移量为负值 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d {
        height: 100px;
        width: 250px;
        margin: 20px auto;
        background-color: lightsalmon;
        box-shadow: -5px -5px 5px lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="d"></div>
  </body>
</html>

页面浏览效果：
偏移量为负值
说明：

  • 横向偏移量设置为正值时表示阴影相对盒子向右偏移，设置为负值时表示阴影相对盒子向左偏移。
  • 纵向偏移量设置为正值时表示阴影相对盒子向下偏移，设置为负值时表示阴影相对盒子向上偏移。

2.4、案例4 - 模糊范围

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 模糊范围 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d {
        height: 100px;
        width: 250px;
        margin: 20px auto;
        background-color: lightsalmon;
        box-shadow: 0 0 10px lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="d"></div>
  </body>
</html>

页面浏览效果：
模糊范围
说明：

  • 模糊范围为一个可选值。
  • 模糊范围值越大，阴影模糊范围越大，颜色越浅。
  • 不设置模糊范围或者设置为0时，阴影的边缘没有模糊效果。

2.5、案例5 - 扩展范围

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 扩展范围 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d {
        height: 100px;
        width: 250px;
        margin: 20px auto;
        background-color: lightsalmon;
        box-shadow: 0 0 0 10px lightgreen;
      }
    </style>
  </head>
  <body>
    <div class="d"></div>
  </body>
</html>

页面浏览效果：
扩展范围
说明：

  • 扩展范围为一个可选值。
  • 扩展范围值越大，阴影尺寸越大，扩展范围值越小，阴影尺寸越小。

2.6、案例6 - 阴影颜色

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 阴影颜色 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d {
        height: 100px;
        width: 250px;
        margin: 20px auto;
        background-color: lightsalmon;
        box-shadow: 0 0 10px 10px;
      }
    </style>
  </head>
  <body>
    <div class="d"></div>
  </body>
</html>

页面浏览效果：
阴影颜色
说明：

  • 阴影颜色为一个可选值，默认值是黑色。

2.7、案例7 - 多重阴影

下面是一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 多重阴影 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .d {
        height: 100px;
        width: 250px;
        margin: 20px auto;
        background-color: lightsalmon;
        box-shadow: 5px 5px 5px lightgreen, inset 5px 5px 5px lightblue;
      }
    </style>
  </head>
  <body>
    <div class="d"></div>
  </body>
</html>

页面浏览效果：
多重阴影
说明：

  • 用 , 将多组box-shadow属性值隔开，可以设置多重阴影效果。
chodenke
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html盒子阴影的语法,css3 盒阴影box-shadow
weixin_42520780的博客
06-26 3152
1.描述：box-shadow可以设置一个或多个下拉阴影的框，此属性使用于盒模型不是用来设置文字阴影，设置文字阴影可以使用text-shadow2.语法：box-shadow：h-shadow v-shadow blur spread color inset◆h-shadow：(必)定义阴影的水平位移，可负(正数：阴影出现在边框的右边，负数：阴影出现在边框的左边 0：不显示)◆v-shadow：...
CSS3边框及盒子阴影
weixin_68485297的博客
04-04 4381
一、CSS3边框 1、border-radius 圆角边框 按照顺时针的顺序去设置 左上角，右上角，右下角，左下角 ，值越大，圆角越圆。 ①设置一个值，四个圆角同时变化 ②设置两个值，第一个值为左上、右下圆角的值，第二个值为右上、左下圆角的值 （🔺 是对角关系） ③设置三个值，第一个值为左上圆角的值，第二个值为右上、左下圆角的值 ，第三个值为右下圆角的值 ④设置四个值，按照左上、右上、右下、左下的顺时针顺序 ⑤圆形 利用border-radius属性制作圆...
html 盒子阴影
misma123的博客
02-26 1333
盒子阴影
HTML 的 box-shadow 介绍
火星男孩的分享空间
04-01 1078
【代码】HTML 的 box-shadow 介绍。
CSS盒子模型 （圆角边框，盒子阴影，文字阴影）
最新发布
2301_79341065的博客
07-17 1018
重点（大家好，今天我们将继续来学习CSS的相关知识，大家可以在评论区进行互动答疑哦~加油！💕）
html-2 盒子阴影
独钓寒江雪
12-22 1664
box-shadow 几个参数详解 第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。 值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧 第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。 值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方 第三个长度值代表了阴影的模糊半径,即模糊程度，可选 第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正， 则整个阴影都延展扩大，反之值为负值是，则缩小 即阴影一圈的大小 第五个参数 color 部分的
前端 鼠标经过盒子变阴影
qq_55061257的博客
07-24 576
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子.
css 盒子边框 阴影 背景图
weixin_64195420的博客
04-06 287
盒子圆角边框 // border-radius: (顺时针设置 左上角 右上角 右下角 左下角)【值越大 角度越大】 // border-radius:20px；(一个值表示【四个角都是一样的模样】) // border-radius:20px 50px；(两个值表示【右上角和左下角圆角大小】) // border-radius:20px 50px 30px；(三个值表示【第一个表示 左上角圆角 第二个表示 右上角和左下角圆角大小 第三个值表示 右下角大小 】) 圆形 利用border.
CSS3学习笔记之立体盒子
03-16
本篇学习笔记将深入探讨如何利用CSS3创建具有立体感的盒子，供所有对Web设计感兴趣的人共享和学习。 首先，我们要了解CSS3中的盒模型。在传统CSS2.1中，盒模型包括内容区域（content）、内边距（padding）、边框...
HTML5学习笔记（总结提炼版）——002 CSS
03-14
CSS3引入了许多新特性，如多列布局（`column-count`、`column-gap`等）、圆角边框（`border-radius`）、阴影效果（`box-shadow`、`text-shadow`）、过渡效果（`transition`）、动画（`animation`）、渐变（linear-...
html+css传智播客老师整理7天的笔记
01-04
6. 盒阴影与文本阴影：学习如何为盒子和文本添加阴影效果。 7. 字体与文本：调整字体大小、行高、字间距、文本对齐等。 8. Flexbox布局：掌握弹性盒子模型，实现灵活的响应式布局。 9. Grid布局：学习网格布局，用于...
CSS学习笔记
03-05
这篇“CSS学习笔记”详细探讨了CSS的核心概念和实践技巧，对于想要提升网页设计技能的开发者来说，是一份宝贵的学习资源。 首先，我们需要理解CSS的基本结构。CSS由选择器和声明组成，选择器定位我们要应用样式的...
HTML5-CSS3_Notes:我的 Html5-Css3 笔记
06-18
4. 渐变和阴影：CSS3提供了线性渐变、径向渐变以及文本和盒子阴影，丰富了视觉效果。 5. 动画和过渡：通过keyframes动画和transition属性，开发者可以轻松实现平滑的页面过渡和元素动画效果。 6. 多列布局：column...
css-形状边缘模糊处理
热门推荐
qq_39111074的博客
01-24 1万+
可以使用 box-shadow 给形状加一个阴影效果： eg: box-shadow:0 0 10px 10px #9fb1c5; 前面两个参数为 0 ，阴影就是围绕形状边缘一圈 box-shadow: h-shadow v-shadow blur spread color inset; h-shadow: 必需的。水平阴影的位置。允许负值 v-shadow: 必需的。垂直阴影的位置。允许负值 blur: 可选。模糊距离 (控制模糊程度，数值越大越模糊) spread: 可选。阴影的大小（数值越大，阴影越大
HTML盒子圆角阴影和定位
MCdongchao的博客
05-16 2446
盒子阴影 box-shadow 设置元素的阴影效果，不会影响到页面的布局 参数： 1:水平偏移量 可正可负 必填 2:垂直偏移量 可正可负 比填 3:模糊半径 可填 4:颜色 一般用rgba div｛ box-shadow: 3px 3px 5px rgba( 0,0,0,.5);｝ p｛box-shadow: -3px -3px 5px rgba( 0,0,0,.5);｝ 圆角 border-radius: 设置圆角 可设四个值 从左上角开始顺时针排列 border-ra
前端学习-盒子阴影（box-shadow）
m0_62211222的博客
03-12 460
同学们也可以鼠标点击右键 ->检查->然后在弹出的页面修改相应的数值，记得点击保存才能看到修改后的页面。这样能更直观的看到效果的变化！最后我们在上图的基础上修改一下这些数值，看看会发生什么变化吧！先上代码（直接复制到你的编译器即可运行）然后我来解释一下这四个值分别代表什么意思。这是我修改后的数值👇。
html盒子阴影效果,CSS3给div或者文字添加阴影（盒子阴影、文本阴影的使用）
weixin_39807954的博客
06-03 4888
添加阴影效果以前只能使用图片来实现了，现在的css3功能非常的强大了，今天我们就一起来看关于CSS3给div或者文字添加阴影(盒子阴影、文本阴影的使用)的方法，具体的例子如下所示．CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。下面分别介绍两种阴影的使用：1，盒子阴影(1)盒子阴影的属性是 box-shadowbox-shadow...
html div 阴影,css实现div框阴影
weixin_42516119的博客
06-15 717
.out {position:relative;background:#bbb;margin:10px auto;width:92px}.in {background:#fff;border:1px solid #555;padding:10px 5px;position:relative;top:-5px;left:-5...DOCTYPE HTML>CSs有一些设计图会经常使用阴影效果看...
html盒子背景颜色和阴影
qq_43201652的博客
08-04 2165
html背景渐变色和阴影
CSS3盒子模型：边框、内边距与阴影解析
“第六章 盒子模型”是关于HTML5和CSS3网页设计的一个章节，主要探讨了如何利用CSS3来实现网页元素的盒子模型布局、样式调整以及相关的视觉效果。 在网页设计中，盒子模型（Box Model）是理解元素布局的基础。它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值