【web前端】CSS笔记小结 圆角矩形+盒子阴影+文字阴影（Day 4）
来源：黑马程序员pink老师前端入门教程
目录
I. 圆角边框
①原理
②使用
疑惑qwq！
③圆形、圆角矩形及不同圆角的实现
II. 盒子阴影
III. 文字阴影
I. 圆角边框
①原理
eg. 不同length的对比
100px 50px
代码：
<!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>新浪导航</title><style>* {margin: 0;padding: 0;}div {display: inline-block;width: 200px;height: 300px;background-color: aquamarine;margin: 100px;text-align: center;line-height: 300px;font-size: 25px;font-family: 'Times New Roman', Times, serif;}.box1 {border-radius: 100px;}.box2 {border-radius: 50px;}</style> </head><body><div class="box1">用例1</div><div class="box2">用例2</div></body></html>
②使用
PS. 1）超出50%的按50%的效果算；
eg.效果：
200px 50px
代码：
<!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>新浪导航</title><style>* {margin: 0;padding: 0;}div {display: inline-block;width: 200px;height: 300px;background-color: aquamarine;margin: 100px;text-align: center;line-height: 300px;font-size: 25px;font-family: 'Times New Roman', Times, serif;}.box1 {border-radius: 100%;}.box2 {border-radius: 50%;}</style> </head><body><div class="box1">用例1</div><div class="box2">用例2</div></body></html>
2）矩形+length=1/2*height→圆角矩形
eg.效果：
1/2width 1/2height
代码：
<!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>新浪导航</title><style>* {margin: 0;padding: 0;}div {display: inline-block;width: 100px;height: 300px;background-color: aquamarine;margin: 100px;text-align: center;line-height: 300px;font-size: 25px;font-family: 'Times New Roman', Times, serif;}.box1 {border-radius: 50px;}.box2 {border-radius: 150px;}</style> </head><body><div class="box1">用例1</div><div class="box2">用例2</div></body></html>疑惑qwq！
为什么1/2宽和1/2高的效果是一样的啊？←我还以为宽的那个会更不明显一点的ಥ_ಥ！！！
希望有大佬能解答一下qwq！！！
③圆形、圆角矩形及不同圆角的实现
代码：
<!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>新浪导航</title><style>* {margin: 0;padding: 0;}div {display: inline-block;background-color: aquamarine;margin: 100px 25px;text-align: center;font-size: 25px;font-family: 'Times New Roman', Times, serif;}.box1 {width: 300px;height: 300px;line-height: 300px;border-radius: 50%;}.box2 {width: 300px;height: 100px;line-height: 100px;border-radius: 50px;}.box3 {width: 300px;height: 500px;line-height: 500px;border-radius: 10px 50px 20px 100px;}</style>
</head><body><div class="box1">用例1——圆形</div><div class="box2">用例2——圆角矩形</div><div class="box3">用例3——不同圆角</div></body></html>II. 盒子阴影
h→正右负左，v→正上负下，spread→正大负小
PS. div也可以有 :hover
eg.代码：
<!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>新浪导航</title><style>* {margin: 0;padding: 0;}div {display: inline-block;background-color: aquamarine;margin: 100px;text-align: center;font-size: 30px;font-family: 'Times New Roman', Times, serif;width: 200px;height: 200px;line-height: 200px;}div:hover {box-shadow: 10px 30px blue inset;}</style> </head><body><div>影子样例</div> </body></html>效果：一截图把鼠标截没了qwq！
III. 文字阴影
eg.代码：
<!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>Document</title><style>p {text-align: center;color: aqua;font-size: 80px;font-weight: 700;font-family: 'Times New Roman', Times, serif;text-shadow: 10px 10px 5px blueviolet;}</style> </head><body><P>字体样例</P> </body></html>效果：
恭喜看到这的小伙伴，你已经完成 CSS第四天的学习了~！
下面进入第五天的学习吧(★ ω ★)→第五天
有用的话就点赞评论收藏嗷！！
【web前端】CSS笔记小结 圆角矩形+盒子阴影+文字阴影（Day 4）相关推荐
- Web前端学习笔记05：CSS_盒子模型_复合选择器_标签显示 模式_三大特性_书写规范
文章目录 1. CSS复合选择器 1.1 后代选择器(重点) 1.2 子元素选择器 1.3 交集选择器 1.4 并集选择器(重点) 测试题 1.5 链接伪类选择器(重点) 1.6 复合选择器总结 2. ...
- web前端开发笔记46-71，78-83 2022/11/04
web前端开发笔记 一.标签群组通配等选择器(TAG) 1.标签选择器 2.群组选择器(不同标签) 3.通配选择器(一锅端) 二.层次选择器 - 后代():M N - 父子:M > N - 兄弟 ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- web前端学习笔记（最新）
web前端学习笔记 大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
- Web前端css知识点概括
Web前端css知识点的简单概括如下,方便记忆. 1.字体,背景(font-style,font-weight,font-size/line-height,font-family...backgrou ...
- Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
目录 前言 一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接 二.从当前页面链接到指定位置 三.链接的访问情况 四.在新窗口中打开链接 例题 结语 前言 本节介绍超链接标签即 ...
- 好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
- Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
- 前端css单位小结：vh、vw、百分比、rem、px、计算属性calc
写在前面: 本文作为本人学习总结之用,同时分享给大家~ 个人前端博客网站:zhangqiang.hk.cn 欢迎加入博主的前端学习qq交流群::706947563,专注前端开发,共同学习进步! 前端c ...
最新文章
- 用友BIP助力大型企业构建“敏态+稳态”的数智企业摩天
- ^_^ 一看就忘不了的IE页面 ^_^
- CubeMx 生成的FreeRTOS 代码在ARM compiler6 编译__forceinline 报错的解决方法
- 公关文秘专业要学计算机,文秘相关专业有哪些
- OpenShift 4 - Knative教程 (4) 自动扩展和收缩
- 【Node学习】—Node.js中模块化开发的规范
- 联想高校AI精英挑战赛再下一城，10项目逐鹿华中科大，智能大数据平台夺冠
- 关于DM8168中移植算法速度慢、效率低的新发现
- LoadRunner 11 安装及破解
- 老闪创业那些事儿（外传）——历经世事的魏爷
- 嵌入式C语言自我修养分享课件
- OpenV2X开源社区亮相全球边缘计算大会
- 天猫精灵 python_天猫精灵控制esp8266点led灯
- Java命令简易入门-3：javac与java命令之(java与jar)
- 从零开始的有刷电子调速器教程，高压大电流电调带回家
- Linux - 常见端口和服务的对照和解释
- 树莓派魔镜MagicMirror —— 3 HDMI连接显示器
- 编码规范与数学之美感想
- 2014 ACM/ICPC 北京站 总结
- 一个有趣的反病毒软件测试