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. 自己写的一个Vue

    下面这里是我自己写的一个小型的vue,原理就是proxy: //Proxy天生没有prototype,因此要加上,不然extends会报错 Proxy.prototype = Proxy.protot ...

  2. 一个ssm综合小案例-商品订单管理----写在前面

    学习了这么久,一直都是零零散散的,没有把知识串联起来综合运用一番 比如拦截器,全局异常处理,json 交互,RESTful 等,这些常见技术必须要掌握 接下来呢,我就打算通过这么一个综合案例把这段时间 ...

  3. python学习笔记5--加密模块hashlib

    import hashlib # md5 ybm_pwd='yuanbapqingsdfs234FF234HF@F' # m = hashlib.md5() # bytes_ybq = ybm_pwd ...

  4. 【整理】HTML5游戏开发学习笔记(2)- 弹跳球

    1.预备知识(1)在画布上绘制外部图片资源(2)梯度(gradient):HTML5中的对象类型,包括线性梯度和径向梯度.如createLinearGradient,绘制梯度需要颜色组http://w ...

  5. 20155202 2016-2017-2 《Java程序设计》第5周学习总结

    20155202 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 第八章:异常处理 java中所有错误会包装成对象,可以尝试(try)执行程序并捕捉(catc ...

  6. Linux 网络操作

    Linux 基础网路操作  ifconfig eth0 down # 禁用网卡 ifconfig eth0 up # 启用网卡 ifup eth0: # 启用网卡 mii-tool em1 # 查看网 ...

  7. J - FatMouse's Speed dp

    题目链接: https://vjudge.net/contest/68966#problem/J 找最长子串并且记录路径. TLE代码: #include<iostream> #inclu ...

  8. linux中断申请之request_threaded_irq【转】

    转自:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=21977330&id=3755609 在linux里,中断处理分 ...

  9. WPF使用DataGridComboBoxColumn完成绑定

    在使用DataGrid的时候,有时候需要使某些列为ComboBox,这时自然想到使用DataGridComboBoxColumn,但是如果使用的是ItemsSource数据绑定后台的对象,就会发现,这 ...

  10. 破解验证码模拟登陆cnblogs

    from selenium import webdriver from selenium.webdriver import ActionChains from PIL import Image imp ...