半透明边框

实现效果:

实现代码:

<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. Android开发学习之路--异步消息Handler,Message,Looper和AsyncTask之初体验

    在简易音乐播放器中,用了Handler,也没有过多地去研究学习,这里再学习下android下的异步消息处理机制.这里用了Handler主要是在线程中不能更新UI,而需要通过Handler才可以.关于异 ...

  2. UNIX网络编程——TCP长连接与短连接的区别

    一.TCP短连接 我们模拟一下TCP短连接的情况,client向server发起连接请求,server接到请求,然后双方建立连接.client向server发送消息,server回应client,然后 ...

  3. UNIX网络编程——处理服务器中大量的TIME_WAIT

    出现条件: 服务器主动关闭 短连接服务加剧 根据TCP协议定义的3次握手断开连接规定,发起socket主动关闭的一方 socket将进入TIME_WAIT状态,TIME_WAIT状态将持续2个MSL( ...

  4. iOS开发之一:入门介绍

    今天就介绍一下iOS开发的基本的东西,有很多东西都是经常用到的而我却经常记不住,所以还是写下来吧. iOS开发需要的开发工具是Xcode,而Xcode又必须运行在 OS X(苹果系统)环境下,所以我们 ...

  5. 《java入门第一季》模拟用户登陆注册案例集合版

    需求:校验用户名和密码,登陆成功后玩猜数字小游戏. 在这里先写集合版.后面还有IO版.数据库版. 一.猜数字小游戏类: 猜数字小游戏的代码见博客:http://blog.csdn.net/qq_320 ...

  6. 《java入门第一季》之泛型引入

    泛型的引入: 首先看一段代码体会自动报错. // 看下面这个代码 自动报错 String[] strArray = new String[3]; strArray[0] = "hello&q ...

  7. 1016. Phone Bills (25) -vector排序(sort函数)

    题目如下: A long-distance telephone company charges its customers by the following rules: Making a long- ...

  8. Leetcode_7_Reverse Integer

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41578077 Reverse Integer Revers ...

  9. (NO.00001)iOS游戏SpeedBoy Lite成形记(二十九):增加排行榜功能2

    接下来回到Xcode中,首先在PopupLayer.m中添加justClose方法: -(void)justClose{ [self.gameScene removePopup]; } 然后在Game ...

  10. 【一天一道LeetCode】#38. Count and Say

    一天一道LeetCode系列 (一)题目 The count-and-say sequence is the sequence of integers beginning as follows: 1, ...