第二章 Background & Borders 之 Transparent Border

1.Translucent(半透明的) border

第二章的第一个例子是实现半透明的边框。效果如下:

初看之下,很简单嘛,boder就搞定啦,代码如下:

border: 10px solid hsla(0,0%,100%,.5);

background: white;

但是这样根本不起作用啊,给人的效果是border不见了....

咦...咋回事喃? 原来,border根本没消失,我们的background:white把border给遮住了 -_-,所以只要想办法把background的宽度改到盒子的内边距padding就行的

去掉background:white之后,可以清晰看到盒子的边框.

background属性,默认是覆盖到border-box的,想要修改它,可以通过background-clip属性(IE9+):

background-clip: content-box|padding-box|content-box

铛铛铛铛....所以给盒子加上background-clip:padding-box 之后,就达到我们想要的效果了

时间: 2024-10-06 09:42:32

第二章 Background & Borders 之 Transparent Border的相关文章

第二章 Background & Borders 之 Multiple borders

2. Multiple Boerders 多边框 在工作中我们可能会遇到给盒子外层实现多个边框.如以下效果: 方法1: 实现这个效果,其实很简单,使用CSS3 的box-shadow属性,先看看box-shadow属性怎么使用吧. box-shadow: h-shadow v-shadow blur spread color inset|outset / none/ inherit h-shadow 相对盒子的水平偏移量 v-shadow 相对盒子的垂直偏移量 blur 模糊半径(阴影的宽度)

深入浅出Zabbix 3.0 -- 第二章 Zabbix Web操作与定义

第二章  Zabbix Web操作与定义 本章介绍Zabbix 中一些基本概念的定义和web前端页面的操作,包括Zabbix中使用的一些术语的定义,Web页面中用户管理.主机和主机组的管理,以及监控项.模板.触发器.告警的管理和操作,还有Graphs.Screens.Maps及Reports等.通过本章的学习掌握一些基本概念并能够通过Web页面的操作完成对Zabbix的管理. 2.1 定义 hosts(主机) Zabbix中需要监控的服务器.交换机及其他设备我们都统一称作host,这些设备与Za

图像处理分析与机器视觉【第二章】

第二章是数字图像及其性质,开篇介绍了一些基本概念和数学工具. 首先提出了一个问题,那就是透视投影,在将3D的物体经过透视投影和转化为2D图像时,损失了大量的信息,所以通过一幅图像重构3D场景就成为了一个病态的问题. 在数学知识部分,涉及到了很多接触过但未深入了解的和从未接触过的知识点.首先是理想冲激,狄拉克分布,可以进行图像的采样.从网上找了一个相关的笔记 http://www2.math.uu.se/~maciej/courses/PDE_for_Finance/SP2013.pdf 随后是对

锋利的jQuery第二章

感觉还是看书好一些,jQuery并不难,但是对于一些东西如果你不知道,你就会感觉到很头疼,比如以前看选择器,网上那么多文章,总结的挺好的,但是不能看下去,太多了,对电脑不爽.现在从书上看到这些总结,感觉很清晰,也可以接受. 1,用jQuery判断某个元素是否存在 if($("#tt").length > 0) { //使用长度判断 } if( $("#tt")[0] ) { //转为Dom对象判断 } 2,选择器,根据例子记忆很好理解 (1)基本选择器:id,

第二章 吸引你的眼球—UI编程(1)

第二章 吸引你的眼球-UI编程 学习Android应用程序的开发技术,除了先要熟悉相关工具以外,最直接的,就是学习如何使用各种UI组件.我们开发的应用程序,一般都会包含一组用户可见的界面,而这些界面就是由一个个的AndroidUI组件组成的.我们在学习界面开发技术的过程中,首先就要熟悉这些组件,然后才能将它们有效的组织起来,构成一个美观.合理的界面. 本章会先详细讲解一些常用的UI组件,及如何自定义组件,然后会说明一些其它常用的UI编程技术. 2.1 UI基础-常用UI组件 Android的组件

《精通CSS高级web标准解决方案》——第一章、第二章(为样式找到应用目标)即选择器

2015-04-16 08:49:35 1.“多类症”:classitis.   “多div”:症. 第二章 为样式找到应用目标(选择器) 1.有效且结构良好的文档为你要应用的样式提供了一个框架. 2.选择器:1.类型选择器(即元素选择器) 2.后代选择器 3.类选择器 4.ID选择器 3.不要给这些元素指定不同的类,而应将一个类货ID应用于他们的祖先,然后使用后代选择器来定位他们. 4.有时我们需要根据文档结构之外的其他条件对元素应用样式,例如表单元素或链接的状态.这要使用伪类选择器来完成.

第二章:创建框架和窗体

没有翻译第一章是由于第一章仅仅介绍了怎样设置IDE.这方面网上文章非常多,我就没有翻译,直接从第二章開始. 以下是原文链接.翻译有不正确的地方请朋友们指正. http://www.rastertek.com/gl40tut02.html Tutorial 2: Creating a Framework and Window This OpenGL 4.0 tutorial will cover setting up a basic frame work and window. 这一章涵盖了创建基

第二章:创建框架和窗口

没有翻译第一章是因为第一章只介绍了如何设置IDE,这方面网上文章很多,我就没有翻译,直接从第二章开始. 下面是原文链接,翻译有不对的地方请朋友们指正. http://www.rastertek.com/gl40tut02.html Tutorial 2: Creating a Framework and Window This OpenGL 4.0 tutorial will cover setting up a basic frame work and window. 这一章涵盖了创建基本框架

python爬虫学习第二章

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption