CSS3圆角边框和盒子阴影
时间:2022-07-22
本文章向大家介绍CSS3圆角边框和盒子阴影,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
圆角边框(CSS3)
- 语法:
border-radius: xxpx;
- 其中每一个值可以为 数值或百分比的形式。
- 技巧: 让一个正方形 变成圆圈
border-radius: 50%;
示例:
代码:
.b1{
width: 250px;
height: 250px;
border: 1px solid;
border-radius: 50%;
margin: 50px auto;
}
.b2{
margin: 50px auto;
width: 250px;
height: 50px;
border: 1px solid;
border-radius: 25px ;
}
效果图矩形的圆角(即第二个图), 就不要用百分比,因为百分比会是表示高度和宽度的一半。 而我们这里矩形就只用高度的一半就好了。精确单位。
盒子阴影(CSS3)
- 语法:
box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影;
值 |
作用 |
---|---|
h-shadow |
必须,水平阴影的位置 |
v-shadow |
必须,垂直阴影的位置 |
blur |
可选,模糊的距离 |
spread |
可选,阴影的尺寸 |
color |
可选,阴影的颜色 |
inset |
可选,将外部阴影改成内部阴影 |
- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 是默认的,不需要写
- 想要内阴影可以写 inset
div {
width: 200px;
height: 200px;
border: 10px solid red;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, 0.4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色 内/外阴影; */
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 聊聊dubbo-go的failsafeCluster
- 【HDFS】distcp报错Check0sum mismatch
- ffmpeg转换多媒体文件,真香
- 静态库与动态库的那些事
- 云服务器网络延迟与丢包问题定位(mtr工具)
- Spark UDF1 输入复杂结构
- Qt音视频开发6-ffmpeg解码处理
- MySQL 百万级数据量分页查询方法及其优化
- 教你设计一个超牛逼的本地缓存!
- Flutter延时任务、Flutter通过Future与Timer实现延时任务
- DDIA 笔记
- 工作流和状态机
- CentOS 6.x 搭建:Headless Chrome + ChromeDriver + Selenium的爬虫环境系统
- 聊聊dubbo-go的registryAwareCluster
- 同样是空值,null和undefined有什么异同?