1.hsla或rgba实现半透明边框。

rgba在rgb的基础上增加了透明通道，就不详细说了，下面重点说下hsla：

说明：

HSLA(H,S,L,A)

取值：

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。
两种方式实现透明边框的代码如下：
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css" media="screen">

		body{

			height: 1000px;

			background: #f00;

		}

		.div1{

			width: 100%;

			height: 100px;

			background: #fff;

			box-sizing: border-box;

			/*rgba*/

			border:10px solid rgba(255,255,255,0.5);

			/*hsla*/

			border:10px solid hsla(0,0%,100%,0.5);
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　/*background-clip为背景截取，默认为border-box,此处要改为padding-box*/
			background-clip: padding-box;

		}

	</style>

</head>

<body>

	<div class="div1">

	</div>

</body>

</html>

　2.box-shadow实现多重边框

box-shadow:x偏移量，y偏移量，模糊值，扩展半径，内/外阴影。 须注意的是，box-shadow并不影响布局效果。在制作样式时会经常用到这点。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css" media="screen">

		.div1{

			width: 100px;

			height: 100px;

			margin: 50px;

			box-shadow: 0 0 0 10px #ff0, 0 0 0 15px #f00;

		}

		.div2{

			width: 100px;

			height: 100px;

			margin: 50px;

			box-shadow: 0 0 0 10px #ff0 inset, 0 0 0 15px #f00 inset;

		}

	</style>

</head>

<body>

	<div class="div1">

	</div>

	<div class="div2"></div>

</body>

</html>

3. outline实现双边框（伪div嵌套效果），与box-shadow相同的是，outline同样不会影响布局。还可利用outline-offset控制outline与border之间的距离。　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .div1{

            width: 100px;

            height: 100px;

            outline: 10px solid #ff0;

            border:10px solid #f00;

            outline-offset: 10px;

            border-radius: %;

            margin: 50px;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

</body>

</html>

喜欢请推荐，个人原创，转载标明出处。

CSS3实现原腾讯视频透明边框，多重边框等（关于边框那些不为人知的事情）的更多相关文章

  1. wordpress插入腾讯视频的方法

    wordpress插入腾讯视频的方法 最近网站需要插入腾讯视频,但是腾讯视频目前没有分享代码,只有分享到微信,qq,微博等具体选项.百度这个问题,貌似没有很好地解决办法,好像有两个插件可以使用,安装试 ...

  2. 腾讯视频嵌入手机端网站demo - 就像微信文章中一样一样的

    页面中的调用如下: <iframe id="video_iframe" class="video_iframe" src="TenVideoPl ...

  3. Android 高仿 频道管理----网易、今日头条、腾讯视频 （可以拖动的GridView）附源码DEMO

    距离上次发布(android高仿系列)今日头条 --新闻阅读器 (二) 相关的内容已经半个月了,最近利用空闲时间,把今日头条客户端完善了下.完善的功能一个一个全部实现后,就放整个源码.开发的进度就是按 ...

  4. 腾讯视频QLV格式转换mp4的方法

    腾讯视频QLV格式转换mp4的方法不知道大家知不知道用?喜欢用腾讯视频的朋友应该都知道腾讯视频单独搞出了个QLV格式文件,只能用腾讯独有的腾讯视频软件才能播放,就算用格式工厂转换也不行,那么腾讯视频的 ...

  5. 【转】如何将qlv格式的腾讯视频转换为mp4格式

    一般来说,每个视频网站都会有自己的视频播放格式,如优酷的KUX.爱奇艺的QSV和腾讯的QLV等.但是大家知道,优酷是有转码功能的,而就目前来说腾讯视频还没有转码功能,这就给大家造成了一定的困扰.这里呢 ...

  6. 从蓝光到4K，腾讯视频高码率下载背后的技术

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 由 腾讯技术工程官方号 发布在云+社区 蓝光和4k视频正逐渐普及,4K视频峰值码率超10Mbit/s.架构平台部TVideo平台从资源,链路.缓 ...

  7. Android TV开发总结（四）通过RecycleView构建一个TV app列表页（仿腾讯视频TV版）

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/52854131 前言:昨晚看锤子手 ...

  8. 仿爱奇艺视频，腾讯视频，搜狐视频首页推荐位轮播图（二）之SuperIndicator源码分析

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52510431 背景:仿爱奇艺视频,腾讯视频 ...

  9. 腾讯视频国际版（Android）电量测试方法研究与总结

    本文由云+社区发表 作者:腾讯移动品质中心TMQ 1.研究背景: 在2017年Google I/O大会上,Google发布了Google Play管理中心的新功能:Android vitals.当ap ...

随机推荐

  1. 《剑指offer》— JavaScript（34）第一个只出现一次的字符

    第一个只出现一次的字符 题目描述 在一个字符串(1<=字符串长度<=10000,全部由大写字母组成)中找到第一个只出现一次的字符,并返回它的位置. *** 思路 新建一个对象,其中key用 ...

  2. 浅说搜索引擎和SEO

    搜索引擎 基本工作原理 信息收集功能 技术点SEO优化核心 优化重点 SEO优化 网站URL title信息 meta信息 图片ALT flash信息 frame框架 网页重要度特征 之前有看到一个师 ...

  3. Codeforces Round #547 (Div. 3) D

    http://codeforces.com/contest/1141/problem/D 题目大意: 鞋子匹配,用一个小写字母表示一种颜色.L[i]表示左脚的颜色,R[i]表示右脚的颜色,只有当L[i ...

  4. 优雅地搭建整合ssm项目

    spring + spring mvc + mybatis 三大框架建议观看 黑马程序员出品的 Springmvc+Mybatis由浅入深全套视频教程 Spring框架2016版视频 观看顺序 ,我个 ...

  5. 《翻译》PEP 380 – 委托子生成器语法

     PEP 380 – 委托子生成器语法 翻译自: https://www.python.org/dev/peps/pep-0380/ 摘要 一项新的语法被提出了:生成器委托其部分操作给另一个生成器.委 ...

  6. Selenium学习（Python）

    #从Selenium中导入Webdriver类,该类中定义了selenium支持的浏览器 # webdriver.Firefox # webdriver.FirefoxProfile # webdri ...

  7. android中实现在ImageView上随意画线涂鸦

    我实现的思路: 1.继承ImageView类 2.重写onTouchEvent方法,在ACTION_MOVE(即移动时),记录下所经过的点坐标,在ACTION_UP时(即手指离开时,这时一条线已经画完 ...

  8. js拾遗: 函数字面量

    今天落叶同学发我一篇文章,我看到一个"新"名词 "函数字面量" (也可叫直接量),当时我就郁闷了,这是什么东西? 我怎么没听说过..回头翻了下权威指南,在第 4 ...

  9. 关于Asp.Net中的编程实现下载

    经常在论坛看见有人求Asp.Net中编程实现下载的代码,有些还希望能断点续传什么的.其实问题的关键在于权限.B/S和C/S不仅仅是外观上的区别而已. 下载,顾名思义是客户端要下,所以载.你硬塞給人家那 ...

  10. 20155317 王新玮 2016-2017-2 《Java程序设计》第6周学习总结

    20155317 王新玮 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 10.1.1串流设计的概念 Java将输入/输出抽象化为串流,数据有来源及目的地,衔 ...