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教程:边框属性border的极致应用
Apr 02 HTML / CSS
IE兼容css3圆角的实现代码
Jul 21 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php adodb介绍
2009/03/19 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
js控制table合并具体实现
2014/02/20 Javascript
AngularJS基础知识
2014/12/21 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
《小猪家的桃花树》教学反思
2014/04/11 职场文书
装修施工安全责任书
2014/07/24 职场文书
工作检讨书500字
2014/10/19 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
python实现socket简单通信的示例代码
2021/04/13 Python
alibaba seata服务端具体实现
2022/02/24 Java/Android