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的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 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学习笔记之面向对象编程
2012/12/29 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
使javascript也能包含文件
2006/10/26 Javascript
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
使用angular写一个hello world
2015/01/23 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
python使用append合并两个数组的方法
2015/04/28 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python iter()函数用法实例分析
2018/03/17 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
局域网定义和特性
2016/01/23 面试题
保送生自荐信范文
2013/10/06 职场文书
文秘专业大学生求职信
2013/11/10 职场文书
星级党支部申报材料
2014/05/31 职场文书
2014年度个人总结范文
2015/03/09 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
安全责任协议书范本
2016/03/23 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
Python开发五子棋小游戏
2022/05/02 Python
Golang Web 框架Iris安装部署
2022/08/14 Python