web前端基础——盒子的阴影

最新推荐文章于 2023-11-26 18:15:02 发布
最新推荐文章于 2023-11-26 18:15:02 发布
阅读量725 收藏 1
点赞数
分类专栏： web前端基础 文章标签： django python 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NGUP_LEE/article/details/123232408
版权

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名：box-shadow

常用参数：

参数作用
h-shadow必须，水平偏移量，允许负值
v-shadow必须，垂直偏移量，允许负值
blur可选，模糊度
spread可选，阴影扩大
color可选，阴影颜色
inset可选，将阴影改为内部阴影
NGUP_LEE
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端基础——CSS入门
01-20
web前端基础——CSS入门 1.css的引入方式 内部样式： 直接在style里面写 内联样式： 外部样式表 2.css选择器 id选择器： #id名{} Hello World! #para1 { text-align:center; color:red; } ID属性不要以...
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案
Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
星辰迷上大海的博客
05-17 3409
Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
web前端（盒子阴影、多列显示、媒体查询、JavaScript的常用语句、变量、变量命名规则、常量、基本数据类型、模板字符串、数据类型转换、运算符、分支语句、三元运算符、Switch语句、循环）
m0_74355247的博客
07-28 90
【代码】web前端（盒子阴影、多列显示、媒体查询、JavaScript的常用语句、变量、变量命名规则、常量、基本数据类型、模板字符串、数据类型转换、运算符、分支语句、三元运算符、Switch语句、循环）
（24）css3盒子阴影
Java田根旺
12-13 1254
1.边框阴影 在 CSS3 中，box-shadow 属性用于对盒子边框添加阴影。 2.边框阴影语法 box-shadow 属性向盒子添加阴影，属性值有2-4 个长度值、可选的颜色值以及可选 的 inset 关键词来规定，省略的长度是 0。 盒子阴影顺序: 水平位置 垂直位置 模糊距离 扩大尺寸 阴影颜色 是否内阴影inset，注意：如果是外阴影的话，不需要设置outset属性，默认不设置的情况下就是外阴影，但是一旦设置outset不存在不合法的语法，反而会出现不生效的问题。 3.多层阴.
Web前端开发笔记20——盒子模型与阴影
DRLDER的博客
04-19 477
1.网页布局过程： 先准备好网页元素，网页元素基本都是盒子box。 利用ccss设置好盒子样式，然后摆放到相应位置。 往盒子里面装内容。 2.盒子的组成部分： 3.表格的细线边框：border-collapse属性控制浏览器绘制表格边框的方式。控制相邻单元格的边框。 语法：border-collapse：collapse； collapse是合并的意思。 边框会影响盒子的大小。 4.padding的复合写法： 内边距会影响盒子大小。 为了保证盒子跟效果图大小保持一致，则让w
css如何给盒子底部加阴影,CSS3 --添加阴影（盒子阴影、文本阴影的使用）
weixin_39674028的博客
08-04 1万+
CSS3-给div或者文字添加阴影(盒子阴影、文本阴影的使用)CSS3定义了两种阴影：盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本，而文本阴影需要IE10及其更新版本。下面分别介绍两种阴影的使用：1，盒子阴影(1)盒子阴影的属性是box-shadow1box-shadow:5px5px10pxgray;前两个值分别表示阴影水平方向和垂直方向的偏移量。第三个值表示模糊距离。最后...
web前端——JavaScript基础
03-06
思维导图式笔记， 笔记来源https://blog.csdn.net/qq_38490457/article/details/109257751
web前端基础知识——HTML常用标签篇
01-08
html文档也叫web页面 二、HTML常用标签的学习： head标签 头标签 title标签 显示在网页的选项卡区域 body标签 显示网页的所有内容 meta标签 信息标签 charset=utf-8 meta 标签在head里面 标注当前网页的编码格式 ...
web前端——好玩的魔方.zip
12-04
web前端，展示动态的魔方。
CSS|盒子阴影
Alan_Lowe
08-01 2400
CSS|盒子阴影 使用box-shadow可以设置盒子的阴影，它有六个参数，其中前两个是必选的 box-shadow: 阴影的水平位置 阴影的垂直位置 模糊距离 阴影的尺寸阴影的颜色 外部或内部 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> div{
前端基础(十六)_BFC、box-shadow（盒子阴影）、text-shadow（文字阴影）
见贤思齐焉，见不贤内自省
12-22 574
BFC、box-shadow（盒子阴影）、text-shadow（文字阴影）
【web前端】CSS盒子模型
qq_61768389的博客
06-29 2053
居然隔了一个星期了，啊我到底在干嘛。使用课程是黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili目录框架 一、盒子模型1、盒子模型组成2、边框 3、表格的细线边框4、边框会影响盒子的实际大小 5、内边距6、案例-新浪导航栏7、案例-小米侧边栏8、外边距9、外边距典型应用10、外边距合并11、清除内外边距二、PS基本操作综合案例 ​编辑 疑问解答 三、圆角边框1、语法和原理 2、常用写法 四、盒子阴影 五、文字阴影 代码如下：
Web前端入门（十八）圆角边框及盒子阴影
treesorshining的博客
10-26 2249
半径（圆的半径） 原理:(椭）圆与边框的交集形成圆角效果 参数值可以是数值或百分比的形式 如果是正方形盒子，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50% 如果是一个矩形，设置为高度的一半就可以（圆角矩形效果） 该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角 2.盒子阴影 CSS3 中新增了盒子阴影，可以使用 box-shadow 属性为盒子添加阴影。 值 描述 h-shadow 必需。水平阴影的位置，允许负值。阴影正值往右移动
前端学习笔记之盒子阴影
no pains,no gains
04-06 880
前端学习笔记之盒子阴影 盒子阴影–box-shadow 前两个属性是必须写的，其余的可以省略。 语法格式 box-shadow： 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影； 值 描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 ...
前端学习：圆角边框、盒子阴影、文字阴影
real_laugh的博客
02-17 868
一、圆角边框 border-radius属性可以使盒子编程圆角。 原理： 语法： border(-top/bottom-left/right)-radius: length; 注：length可以为数值或百分比形式。 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。 如果是个矩形，想要设置为圆角矩形，把数值修改为高度的一半即可。 该属性可以设置多个值。 两个值：分别代表左上和右下，左下和右上 四个...
（前端）你了解shadow吗？—css属性:box-shadow、text-shadow详解
最新发布
weixin_64388392的博客
11-26 6878
css属性：box-shadow、text-shadow详解与实现案例
CSS系列之盒子阴影box-shadow（CSS3）
热门推荐
老__L的博客
01-30 2万+
本文主要介绍CSS的box-shadow属性。盒子阴影box-shadow（CSS3）
13.前端笔记-CSS-盒子样式应用（圆角、阴影）
虽然但是
11-30 998
css设置圆角边框、盒子阴影、文字阴影
vscode:Web前端——登录、注册界面
06-07
好的，我可以帮你提供一些思路。首先，登录和注册界面是Web前端的常见功能，可以使用HTML、CSS、JavaScript等技术来实现。以下是一些简单的步骤： 1.设计页面布局：可以参考一些常见的登录、注册页面的设计，例如输入框、按钮的布局和样式等。 2.编写HTML代码：根据设计的页面布局，编写HTML代码，将页面元素放到合适的位置。 3.使用CSS美化页面：通过CSS样式，可以实现页面的美化，例如颜色、字体、边框、背景等。 4.编写JavaScript代码：登录和注册功能需要与服务器进行交互，可以使用JavaScript编写相关代码，例如发送请求、验证输入等。 5.测试和调试：完成以上步骤后，可以进行测试和调试，确保功能正常。 总的来说，实现登录和注册界面需要一些前端技术的知识和经验，建议你参考一些相关的教程和示例，逐步学习和实践。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值