盒子圆角边框(柠檬精和大黄脸的制作)
- 盒子模型的稳定性:width>padding>margin(外边距合并)
圆角边框(CSS3)
- border-radius:50%;
- 有兼容性问题
- border-radius:1px 1px 1px 1px;/还是顺时针方向,分别控制四个角/
- border-radius:50% 0;/代表左上角和右下角都是圆形,而另外两个不变/
- border:1px solid red;边框属性
课堂实例:
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><title>2019年9月9日—盒子圆角</title><style>div{width: 300px;height: 300px;background-color: pink;margin:100px auto;/*表示上下100像素,左右居中*/border-radius: 150px;/*0是直角,是原来的正方形的一半的时候的时候变成标准圆用border-radius:50%;也可以实现*/border:1px solid red;}</style>
</head>
<body><div>
</body>
</html>
作业1:柠檬精(瞎鼓捣的)
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><title>作业——柠檬精</title><style>div{width: 200px;height: 200px;background-color: yellow;border-radius: 120px 0;border:1px solid darkgoldenrod;text-align: center;line-height: 200px;/*text-shadow: 0 0 0 grey;*/}div:hover{background-color: lightseagreen;}</style>
</head>
<body><div>蓝精灵爱吃柠檬</div>
</body>
</html>
实现的效果是这样的:
作业2:QQ表情包“大黄脸”
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><title>作业之—QQ表清包"大黄脸"</title><style>.nav{width: 200px;height: 200px;background-color: yellow;border-radius: 50%;border:1px solid red;overflow: hidden;}.son1{float: left;margin-top:40px;padding: 4px;width: 80px;height: 50px;border-radius:100%;background-color: white;padding-right: 1px;}.son2{margin-top:40px;padding: 4px;float: right;width: 80px;height: 50px;border-radius:100%;background-color: white;padding-left: 1px;}.grandson1 , .grandson2{background-color: black;float: center;margin-top:18px;width: 20px;height: 20px;border-radius: 50%;}</style>
</head>
<body><div class="nav"><div class="son1"><div class="grandson1"></div></div><div class="son2"><div class="grandson2"></div></div></div>
</body>
</html>
截图效果如下:
睡觉去了,忙了一中午,饭还没吃!
盒子圆角边框(柠檬精和大黄脸的制作)相关推荐
- CSS盒子模型(border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例)
1. 网页布局的本质 首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步 就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
- CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS圆角边框、盒子阴影、文字阴影(01-07课)
01.综合案例-快报模块布局分析 1.大盒子div 2.分2个小盒子(上盒子为标题h,下盒子为列表(无序列表)) 02.03.04.综合案例-快报制作 1.头部制作 2.快报模块列表制作 代码: &l ...
- 前端笔记(5)盒子模型,边框,内外边距,盒子模型布局,ps基本操作,列表样式,圆角边框,盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
- ps基本操作以及盒子综合案例、圆角边框、盒子阴影、文字阴影
网页美工大部分效果图都是利用ps做的,以后切图工作在ps完成. 综合案例 图片不超出box(和父亲一样宽): 标签都是有语义的,标题要用h4,合理的地方用合理的标签. 每个盒子都取类名比较方便找到,利 ...
- CSS圆角边框和盒子阴影
圆角边框 1.圆形 语法 border-radius:length; 方法:让一个正方形变成圆圈 div {width: 200px;height: 200px;background-color: p ...
- CSS圆角边框-盒子阴影-文字阴影
圆角边框 border-radius: 10px; radius半径原理:(椭)圆与边框的交集形成圆角效果. 参数值可以是数值或百分比形式: 如果是正方形,想要设置一个圆,把数值改为高度或宽度的一半, ...
- Web前端入门(十八)圆角边框及盒子阴影
总目录:https://blog.csdn.net/treesorshining/article/details/124725459 文章目录 1.圆角边框 2.盒子阴影 2.1 开发中阴影常用语句 ...
- 【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
文章目录 一.盒子模型圆角边框 二.代码示例 1.代码示例 - 正常矩形边框 2.代码示例 - 圆形边框 3.代码示例 - 圆角矩形边框 4.代码示例 - 综合对比示例 一.盒子模型圆角边框 在 CS ...
最新文章
- 文件上传 java web_JavaWeb 文件上传下载
- draw.io项目本地部署
- RabbitMQ消息的确认模式
- java 按钮设置图片_Java中如何设置带图片按钮的大小
- js原型、原型链、作用链、闭包全解
- 大神把可视化放进数据地图里,原来不敲代码一样能做
- python中文注释
- Python学习之路——Python基础之运算符
- iphone字体大小设置_Win10电脑桌面上使用的记事本便签软件字体大小怎么调整?...
- java map取第一个元素_Java 8从Map中的匹配值中提取第一个键
- 循环机换变速箱油教程_汽车变速箱油啥时更换?重力换和循环机换有啥区别?注意啥?...
- 洛谷 P1032 字串变换
- 2017到2018总结与展望
- git报错以及解决方法
- 25 - 线程池和指令系统
- 超简单的visio安装教程——史上最简单(office版本不撞车)
- [树莓派] 轻松制作一个遥控小车(C++,Socket)
- 【CF37E】 Trial for Chief
- 到底为什么我们总是错过跃阶?
- Java服务,CPU100%问题如何快速定位?