半透明边框

实现效果:

实现代码:

<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) 让背景不要延伸到边框所在的区域下层,也就是让内边距的外沿来裁切背景。

多重边框

实现效果:

实现代码:

<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 设置一层边框。这个方案可实现虚线边框,但它只能实现两层边框。

边框内圆角

实现效果:

实现代码:

<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实现多样的边框效果的更多相关文章

  1. css3实现好看的边框效果

    1.html结构 <div class="box">box</div> <br> <div class="border1&quo ...

  2. 利用CSS3实现圆角的outline效果的教程

    一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-s ...

  3. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  4. CSS3实现半像素边框

    一.思路 普通的1px黑色实线边框: border: 1px solid #000; 半像素边框当然不是简单地把1px改为0.5px(没测试过,可能会被解析成1或者0),border-width的值只 ...

  5. CSS属性定义 文本修饰 边框效果 背景修饰

    一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...

  6. (转)利用 SVG 和 CSS3 实现有趣的边框动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  8. 使用 CSS3 动感的图片标题动画效果【附源码下载】

    在网站中,有很多地方会需要在图片上显示图片标题.使用 CSS3 过渡和变换可以实现动感的鼠标悬停显示效果.没有使用 JavaScript,所以只能在支持 CSS3 动画的现代浏览器中才能正常工作.您可 ...

  9. Codrops 教程:基于 CSS3 的精美模态窗口效果

    Codrops 分享了漂亮的模态窗口效果实现方法,希望给前端开发人员提供一些创新显示对话框的启示.这个方案使用了触发按钮(或任何的 HTML 元素),在点击的时候出现一个模态窗口,带有简单的过渡(或动 ...

随机推荐

  1. Java基础---Java---IO流-----BufferedReader、BufferedWriter、缓冲区、装饰设计模式及和继承的区别

    IO流 IO流用来处理设备之间的数据传输 java对数据的操作是过流的方式 流按操作数据分为两种:字节流与字符流 流按流向分为:输入流,输出流. IO流常用基类 字节流的抽象基类:InputStrea ...

  2. Oracle启用scott用户

    先查询一下目前数据库是否有scott用户 select username,account_status from dba_users where username like '%SCOTT%'; 如果 ...

  3. Java-IO之RandomAccessFile

    RandomAccessFile是随机访问(读写)的类,支持对文件随机访问的读取和写入,也可以从指定的位置读取和写入文件数据.RandomAccessFile虽然属于java.io包,但它不是Inpu ...

  4. 【一天一道LeetCode】#104. Maximum Depth of Binary Tree

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 来源:http ...

  5. Mybatis执行BatchExecutor(四)

    BatchExecutor:顾名思义就是进行批量操作,通过批量操作来提高性能 public class BatchExecutor extends BaseExecutor { public stat ...

  6. SpriteBuilder中使用Node类型的ccb动画节点删除时崩溃的问题

    因为节点需要呈现动画效果,虽然只有两个不同帧. 在SpriteBuilder中新建Bullet.ccb文件,类型为node. 添加如上2张图片,并制作动画效果帧. 在游戏中子弹遇到障碍物会被删除,时机 ...

  7. bootmgr解压缩

    主要参考以下两个文章: 1.  http://bbs.wuyou.com/forum.php?mod=viewthread&tid=211314 2.  http://reboot.pro/f ...

  8. android studio编译慢的问题

    1.修改android studio的使用堆内存,根据自己电脑的内存,尽量设置的大一点,点击help->如下图: 2.接下来设置使用离线gradle构建,一开始就是使用了内置的默认路径gradl ...

  9. Linux之解决你的网络问题

    在网络方面,Linux系统通常可以正常的工作,但是偶尔也会出现让人心烦一些的问题,下面就是一些网络问题的常用的解决方案. 如果你的网络接口看起来已经启动和运行,但是不能访问因特网,这时你就可以试试pi ...

  10. (三十三)UIApplicationDelegate和程序的启动过程

    移动操作系统有个致命弱点,是app容易受到干扰(来电或者锁屏). 当app受到干扰时,会产生一系列的系统事件,这时UIApplication会通知其delegate对象,让delegate处理系统事件 ...