CSS3实现多样的边框效果


Posted in HTML / CSS onMay 04, 2018

半透明边框

实现效果:

CSS3实现多样的边框效果

实现代码:

<div>
你能看到半透明的边框吗?
</div>
div {
    /* 关键代码 */
    border: 10px solid rgba(255,255,255,.5);
    background: white;
    background-clip: padding-box;
    /* 其它样式 */
    max-width: 20em;
    padding: 2em;
    margin: 2em auto 0;
    font: 100%/1.5 sans-serif;
}

实现要点:

设置边框为半透明,这是还看不到半透明边框,因为默认情况下,背景会延伸到边框所在的区域下层,也就是背景是被边框的外沿框裁切掉。
 

通过设置 background-clip: padding-box (初始值是 border-box) 让背景不要延伸到边框所在的区域下层,也就是让内边距的外沿来裁切背景。
 

多重边框

实现效果:

CSS3实现多样的边框效果

实现代码:

<div></div>
/* box-shadow 实现方案 */
div {
    /* 关键代码 */
    box-shadow: 0 0 0 10px #655,
            0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);
    /* 其它样式 */
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}
/* border/outline 实现方案 */
div {
    /* 关键代码 */
    border: 10px solid #655;
    outline: 5px solid deeppink;
    
    /* 其它样式 */
    width: 100px;
    height: 60px;
    margin: 25px;
    background: yellowgreen;
}

实现要点:

box-shadow 实现方案使用的是 box-shadow 的第四个参数(扩张半径)。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值,得到的“投影”其实就像一道实线边框。而借助 box-shadow 支持逗号分割语法,可创建任意数量的投影,因此我们就可实现多重边框效果。
 

border/outline 实现方案是使用 border 设置一层边框,再使用 outline 设置一层边框。这个方案可实现虚线边框,但它只能实现两层边框。

边框内圆角

实现效果:

CSS3实现多样的边框效果

实现代码:

<div>我有一个漂亮的内圆角</div>
div {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655; /* 关键代码 */
    max-width: 10em;
    border-radius: .8em;
    padding: 1em;
    margin: 1em;
    background: tan;
    font: 100%/1.5 sans-serif;
}

实现要点:

outline 不会跟着元素的圆角走(因而显示出直角),但 box-shadow 确实会的,因此,将两者叠加到一起,box-shadow(其扩张值大概等于 border-radius 值的一半) 会刚好填补 outline 和容器圆角之间的空隙,因此可达到我们想要的效果。

总结

以上所述是小编给大家介绍的CSS3实现多样的边框效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
html5 标签
Jul 16 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 #HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 #HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 #HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 #HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 #HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 #HTML / CSS
利用css3径向渐变做一张优惠券的示例
Mar 22 #HTML / CSS
You might like
ADODB的数据库封包程序库
2006/12/31 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP中header用法小结
2016/05/23 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
使用js画图之饼图
2015/01/12 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
python中的装饰器详解
2015/04/13 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
大学生党员自我批评
2014/02/14 职场文书
小学评语大全
2014/04/22 职场文书
大学生求职信例文
2014/06/29 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
总结会主持词
2015/07/02 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
如何利用golang运用mysql数据库
2022/03/13 Golang
golang定时器
2022/04/14 Golang