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 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 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
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
Opacity.js
2007/01/22 Javascript
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
怎样创建、运行java程序
2014/08/01 面试题
运动会演讲稿100字
2014/08/25 职场文书
教育合作协议范本
2014/10/17 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
辞职信的写法
2015/02/27 职场文书
小学教师教学随笔
2015/08/14 职场文书