圆角边框 盒子阴影 文字阴影

一.圆角边框

css3中,新增了圆角边框样式,这样我们的盒子就可以变成圆角

1.border-radius

border-radius属性用于设置元素的外边框圆角

border-radius:length;

radius半径(圆的半径)原理:椭圆与矩形边框的交集形成圆角效果

2.如何把边框变成一个圆形边框

如图所示当宽等于高等于2r时,所组成的边框就是一个圆形

3.设置为圆角矩形

当宽不等于高,且高等于2r时,为圆角矩形,如图所示

4.设置不同的四个角

二.盒子阴影

box-shadow:h-shadow v-shadow blur spread color inset;

1.对于h v的移动方向如图所示

2.blur代表模糊的距离和程度

这是blur为0的效果

blur为20的效果

3.spread传播在这里为阴影尺寸

当尺寸还有其他数据为0时,本质上是阴影块和整个盒子重叠了

不信请看垂直阴影向下面移动

4.color(阴影颜色)

但正常阴影不是黑色的,应该是加点透明,如图所示

5.inset内部阴影

为了清楚的看到内部阴影相对外部阴影是什么效果,我把垂直距离调大点,如图所示

外部阴影

内部阴影

三.文字阴影(text-shadow)

可以使用text-shadow来显示阴影

相关推荐
凤凰战士芭比Q36 分钟前
web中间件——Nginx
前端·nginx·中间件
一 乐1 小时前
点餐|智能点餐系统|基于java+ Springboot的动端的点餐系统小程序(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·小程序·论文
bitbitDown2 小时前
从零打造一个 Vite 脚手架工具:比你想象的简单多了
前端·javascript·面试
liangshanbo12152 小时前
CSS 数学函数完全指南:从基础计算到高级动画
前端·css
码上成长3 小时前
GraphQL:让前端自己决定要什么数据
前端·后端·graphql
冴羽3 小时前
为什么在 JavaScript 中 NaN !== NaN?背后藏着 40 年的技术故事
前端·javascript·node.js
久爱@勿忘4 小时前
vue下载项目内静态文件
前端·javascript·vue.js
前端炒粉4 小时前
21.搜索二维矩阵 II
前端·javascript·算法·矩阵
合作小小程序员小小店4 小时前
web网页开发,在线%台球俱乐部管理%系统,基于Idea,html,css,jQuery,jsp,java,ssm,mysql。
java·前端·jdk·intellij-idea·jquery·web
不爱吃糖的程序媛4 小时前
Electron 应用中的系统检测方案对比
前端·javascript·electron