CSS3实现多样的边框效果
网站建设 2023-01-28 21:39www.1681989.com免费网站
半透明边框
实现效果
实现代码
<div> 你能看到半透明的边框吗? </div> div { / 关键代码 / border: 10px solid rgba(255,255,255,.5); background: white; background-clip: paddg-box; / 其它样式 / max-width: 20em; paddg: 2em; marg: 2em auto 0; font: 100%/1.5 sans-serif; }
实现要点
设置边框为半透明,这是还看不到半透明边框,因为默认情况下,背景会延伸到边框所在的区域下层,也就是背景是被边框的外沿框裁切掉。
通过设置 background-clip: paddg-box (初始值是 border-box) 让背景不要延伸到边框所在的区域下层,也就是让内边距的外沿来裁切背景。
多重边框
实现效果
实现代码
<div></div> / box-shadow 实现方案 / div { / 关键代码 / box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppk, 0 2px 5px 15px rgba(0,0,0,.6); / 其它样式 / width: 100px; height: 60px; marg: 25px; background: yellowgreen; } / border/outle 实现方案 / div { / 关键代码 / border: 10px solid #655; outle: 5px solid deeppk; / 其它样式 / width: 100px; height: 60px; marg: 25px; background: yellowgreen; }
实现要点
box-shadow 实现方案使用的是 box-shadow 的第四个参数(扩张半径)。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值,得到的“投影”其实就像一道实线边框。而借助 box-shadow 支持逗号分割语法,可创建任意数量的投影,我们就可实现多重边框效果。
border/outle 实现方案是使用 border 设置一层边框,再使用 outle 设置一层边框。这个方案可实现虚线边框,但它只能实现两层边框。
边框内圆角
实现效果
实现代码
<div>我有一个漂亮的内圆角</div> div { outle: .6em solid #655; box-shadow: 0 0 0 .4em #655; / 关键代码 / max-width: 10em; border-radius: .8em; paddg: 1em; marg: 1em; background: tan; font: 100%/1.5 sans-serif; }
实现要点
outle 不会跟着元素的圆角走(因而显示出直角),但 box-shadow 确实会的,,将两者叠加到一起,box-shadow(其扩张值大概等于 border-radius 值的一半) 会刚好填补 outle 和容器圆角之间的空隙,可达到我们想要的效果。
以上所述是长沙网络推广给大家介绍的CSS3实现多样的边框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
网站设计
- 静宁会SEO的网站建设公司:全面提升您的网络影
- 提升在线业务的关键:选择最佳的丽水网站建设
- 浙江网站优化发展潜力如何
- 井研专业的网站建设公司:打造您的在线品牌
- 灵山SEO网站建设公司:提升您的在线业务表现
- 蒙城网站建设优化公司:提升您网站表现的理想
- 阳谷企业网站优化:提升线上业务力的关键
- 樟树专业的网站建设公司:打造您在线业务的坚
- 通河百度SEO排名的策略与技巧
- 重庆百度快照排名如何进行精准的客户引流
- 重庆百度快照排名
- 常宁便宜的建站公司:助您轻松打造在线业务
- 巫溪百度网站优化:提升网站曝光率与流量的关
- 湖北整站优化怎么做才能放大客户需求
- 闸北网站建设多少钱?全面解析与预算规划
- 辽宁企业网站优化怎么做电话营销