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

一.圆角边框

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来显示阴影

相关推荐
kyle~12 小时前
前端---Zustand组件库(轻量快速精细化的状态管理方案)
前端
IT_陈寒12 小时前
为什么我的React状态更新总是不按套路出牌?
前端·人工智能·后端
恋猫de小郭12 小时前
Fluter 共享内存多线程正在落地,IsolateGroupBound 来了
android·前端·flutter
十铭忘13 小时前
Vue3实现Pixso中的钢笔工具3——梳理函数调用
前端·vue.js
逝水无殇13 小时前
HTML 元素详解
开发语言·前端·html
糖墨夕13 小时前
AI Agent技术栈选择:Vue3 + NestJS + TypeScript 为什么是绝佳组合
前端·nestjs
Java面试题总结13 小时前
区间树:反向映射的前置数据结构
java·前端·数据结构
KaMeidebaby13 小时前
卡梅德生物技术快报|兔单克隆抗体:噬菌体 Fab 免疫文库搭建实操:兔单克隆抗体重组构建完整参数
前端·网络·数据库·人工智能·算法
胡萝卜术21 小时前
从API调用到手写LRU:力扣146「LRU缓存」的哈希表+双向链表终极进化之路
前端·javascript·面试
科技道人21 小时前
记录 默认置灰/禁用 app ‘Search Engine Selector‘ 的disable按钮
开发语言·前端·javascript