10.10 圆角边框border-radius与盒子阴影:如何使用它实现圆等特殊形状?
时间:2022-07-28
本文章向大家介绍10.10 圆角边框border-radius与盒子阴影:如何使用它实现圆等特殊形状?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
圆角边框border-radius与盒子阴影:如何使用它实现圆等特殊形状?
允许我们设置元素的外边框圆角。当使用一个半径时,确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
对于一个正方形,设置50%,是一个圆。如果宽高不一致,是一个普通距形,出来是一个椭圆。百分比是x、y两个方向上都取百分比。
示例:
border-radius: 20px 10px 50px 30px;
顺时钟方向控制四角位置:
<h1>border-radius的使用</h1>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 20px;
border-radius: 20px 40px;
border-radius: 20px 10px 50px;
border-radius: 20px 10px 50px 30px;
}
</style>
border-radius是一个简写样式:
border-radius: 1em/5em;
/* 等价于:*/
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
块级盒子阴影:如何使用与文本阴影的相似语法,实现盒子阴影?
曾经用过的文本阴影语法:
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
对比盒子阴影语法,在后面加一个扩散半径,与是否内嵌阴影:
/* 颜色 x偏移量 y偏移量 阴影模糊半径 扩散半径 是否为内嵌阴影 */
box-shadow: red 10px 5px 5px 5px inset;
box-shadow目前已经是浏览器全支持,所以不需再添加浏览器前缀了:
ul li:hover{
border-color: #dfdfdf;
border-radius: 10px;
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2);
background-color: #fff;
}
多重阴影
代码:
<h1>多重阴影与文本阴影</h1>
<style>
.white-with-blue-shadow {
width: 300px;
display: block;
border: 1px solid red;
text-shadow: #01b5b5 2px 2px 2px;
box-shadow: red 10px 5px 5px 5px inset,olive -5px -5px 0.4em 1px;
}
</style>
<p class="white-with-blue-shadow">
Sed ut perspiciatis unde omnis iste natus error.
</p>
效果:
【关于作者】
李艺,笔名“石桥码农,腾讯云最具价值专家(TVP),腾讯课堂启明星俱乐部成员,日行一课联合创始人兼 CTO,前 VIPKID 资深技术专家。国内早期闪客之一,具有 15 年以上互联网软件研发经验。
参与研发的音视频直播产品曾在腾讯 QQ 上线,为数千万人使用。从 0 到 1 创建课件标准,被团队誉为课件之父,官方评定为 Adobe 中国 15 位社区管理员之一。著有《小程序从0到1:微信全栈工程师一本通》等计算机图书,是极客时间视频畅销课《微信小程序全栈开发实战》的作者,知乎 Live 讲师,在行互联网技术专家。欢迎到“在行”找我一对一约聊。
- lambda表达式-编译测试
- MongoDB 聚合管道(Aggregation Pipeline)
- 高仿今日头条
- Web打印组件jatoolsPrinter
- Android-Universal-Image-Loader图片异步加载并缓存
- RESTful API 设计最佳实践
- Hello Bonjour!
- SQL Server 2008 FILESTREAM特性管理文件
- 验证码类库CaptchaMvc
- SQL Server : Browser服务
- 仿今日头条顶部导航效果
- iOS微信小视频优化心得
- ADO.NET Entity Framework CodeFirst 如何输出日志(EF 5.0)
- 仿火车出票效果
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux简介及最常用命令(简单易学,但能解决95%以上的问题)
- Linux一行命令处理批量文件详解
- Linux中jar包启动和jar包后台运行的实现方式
- Linux下实现不活动用户登录超时后自动登出
- Centos7下nginx的安装与配置教程详解
- Linux上进行常用软件的配置方法
- Ubuntu系统下网络配置文件解析与说明
- 详解Centos7扩展磁盘空间(LVM管理)
- 设置ssh无密码登录linux服务器的方法
- linux特殊字符及其作用大全
- CentOS7搭建gerrit 代码审查服务方法
- CNS图表复现08—肿瘤单细胞数据第一次分群通用规则
- Gunicorn运行与配置方法
- 如何使用Linux文本操作命令ed进行提权nov5详解
- linux系统用户管理与grep正则表达式示例教程