CSS揭秘(二)背景与边框

Chapter2 背景与边框

1. 半透明边框

基础:了解 RGBA & HSLA 颜色(色调 0~360、饱和度、亮度 (0%黑色~100%白色)、透明度)

默认情况下,背景在边框的下层,容器的背景从半透明的边框透上来并覆盖了底层背景,如下图:

(图片均来自于本书所带网站:http://play.csssecrets.io ,感谢作者的付出)

border: 10px solid hsla(0,0%,100%,0.5);
background: white;
-------------------------------------------------- background-clip: padding-box; //用内边距的外沿裁剪背景

 

2. 多重边框

基础:了解 box-shadow 的基本用法,常用于生成投影,可以接受四个参数,两个偏移量,一个模糊值,一个扩张半径,它的好处在于支持逗号分隔语法,可以创建任意数量的投影

要注意的是扩张半径的设置:

background: pink;
box-shadow: 0 0 0 10px #655,0 0 0 15px #357, //第二层的外框宽度实际是5px
0 0 0 25px #384, //第三层宽度实际为10px

如果只需要两层边框,可以用 outline(描边来实现),它的优点在于边框样式十分灵活。

background: pink;
border: 10px solid #655;
outline: 5px solid deeppink; //虚线用dotted

 3. 背景定位

以前的定位方式使得图片与容器之间没有空隙,提供三种解决方案

background-position:right bottom;           //默认情况下该属性是以padding box为准的
------------------------------------------------------------------------------------
padding:10px
background:url(xxx.svg) no-reapt #334 background-position:right 20px bottom 10px; //该属性现已扩张,允许我们在关键字前指定偏移量(1)
------------------------------------------------------------------------------------
background-orgin:content-box; //更改后以内容区的边缘作为基准 (2)
------------------------------------------------------------------------------------
background-position:calc(100%-20px) calc(100%-10px); //calc()函数,以左上角偏移的思路考虑(3)
 

 4.条纹背景

规则:A颜色纯色从色带的0开始到20%结束,B颜色从色带80%开始为纯色

background:linear-gradient(#fb3,#58a);
background:linear-gradient(#fb3 20%, #58a 80%); //20%为实色,从顶部开始计算百分比
background-size:100% 30px;//背景默认重复平铺,形成条纹

多色条纹:当第二个色标的位置值为0时,它的位置就会被浏览器调整为前一个色标的位置

同色系条纹:

background: repeating-linear-gradient(30deg,#79b,#79b 15px,#58a 0,#58a 30px);  //修改较繁琐
------------------------------------------------------------------------------------------
background:#58a;repeating-linear-gradient(30deg,
hsla(0,0%,100%,0.1),
hsla(0,0%,100%,0.1) 15px,
transparent 0, //表示透明
transparent 30px);

 

 

最后附上样式库:http://lea.verou.me/css3patterns/                           


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361578.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hibernate 拦截器 Hibernate 监听器

Hibernate拦截器(Interceptor)与事件监听器(Listener) 拦截器(Intercept):与Struts2的拦截器机制基本一样,都是一个操作穿过一层层拦截器,每穿过一个拦截器就会触发相应拦截器的事件做预处理或善后处理。  监听器&am…

深入探讨用位掩码代替分支(3):VC6速度测试

wuhanbingwhdx提到了数据相关也会影响流水线(http://blog.csdn.net/zyl910/article/details/1330614)。  他的说法是有一定道理的。但是,在很多时候我们并不仅仅处理一个数值。比如将循环展开,在内循环处理2个或更多个的数值。而…

Web安全相关(三):开放重定向(Open Redirection)

简介 那些通过请求(如查询字符串和表单数据)指定重定向URL的Web程序可能会被篡改,而把用户重定向到外部的恶意URL。这种篡改就被称为开发重定向攻击。 场景分析 假设有一个正规网站http://nerddinner.com/,还有一个恶意网站或钓鱼…

自我修复的JVM

这篇帖子是关于一个应用程序的示例,其中解决每个IT问题的第一个解决方案(“您尝试过关闭并重新打开它”)可能适得其反,弊大于利。 我们没有关闭或重新打开设备的方法,而是拥有一个可以自愈的应用程序:它在…

微信小程序实战–集阅读与电影于一体的小程序项目(八)

31.电影详情页面 movie-template.wxml <view class"movie-container" catchtap"onMovieTap" data-movieId"{{movieId}}"> movie.js onMovieTap:function(event) {var movieId event.currentTarget.dataset.movieid;wx.navigateTo({url…

Resource接口

【转】https://blog.csdn.net/hbtj_1216/article/details/85487787 参考&#xff1a;官方文档 1 简介 Java标准库中的java.net.URL类和标准处理器对于处理低层的资源没有提供很好的功能。例如&#xff0c;并没有提供一个URL的实现能够从classpath或者ServletContext中读取资源等…

JPA实体图

JPA 2.1的最新功能之一是能够使用实体图指定获取计划。 这很有用&#xff0c;因为它允许您自定义使用查询或查找操作检索的数据。 当使用中型到大型应用程序时&#xff0c;通常以不同的方式显示来自同一实体的数据。 在其他情况下&#xff0c;您只想选择最小的信息集即可优化应…

微信小程序实战–集阅读与电影于一体的小程序项目(三)

14.wx.showToast交互反馈 wx.showToast文档 post-detail.js添加个消息提示框 onCollectionTap: function(ev) {var postsCollected wx.getStorageSync(posts_Collected)var postCollected postsCollected[this.data.currentPostId]postCollected !postCollected;postsCol…

Java SE 8新功能介绍:Lambda的遍历,过滤,处理集合和方法增强

在“ Java SE 8新功能导览”系列的这篇文章中&#xff0c;我们将深入解释并探索代码&#xff0c;以了解如何使用lambda表达式和方法引用 遍历集合 &#xff0c;并使用谓词接口过滤它们&#xff0c;实现默认方法在接口中&#xff0c;最后在接口中实现静态方法 。 在上一篇文章“…

C#锐利体验-第八讲 索引器与操作符重载(转)

第八讲 索引器与操作符重载 南京邮电学院 李建忠&#xff08;cornyfield263.net&#xff09; 索引 C#锐利体验 "Hello,World&#xff01;"程序C#语言基础介绍Microsoft.NET平台基础构造类与对象 构造器与析构器方法域与属性索引器与操作符重载 数组与字符串特征与映射…

Java EE 7 / JAX-RS 2.0:具有自定义HTTP标头的简单REST API身份验证和授权

在使用已可用的HTTP协议实施Web服务时&#xff0c;REST带来了很多便利。 通过仅通过指定的URL触发GET&#xff0c;POST和其他HTTP方法&#xff0c;您将确保通过REST服务的响应来完成某些工作。 但是&#xff0c;无论REST给开发人员带来了什么便利&#xff0c;安全性和访问控制的…

easyui树形菜单实现

需求&#xff1a;读取路径配置中的相对路径获取对应的子文件夹及其子文件并形成树形结构&#xff0c;加载xml文件&#xff0c;输入搜索关键字匹配xml里面的value节点的值对应的contact值的集合并进行搜索 例如&#xff1a;输入b&#xff0c;找到xml里面的文本节点等于b的value…

fatal error C1083: 无法打开预编译头文件:“Debug\a.pch”:No such file or directory

一、解决方法 右键点击你创建的项目&#xff0c;选择“属性标签”点击属性&#xff0c;弹出“项目属性页”&#xff0c;在左侧找到以下位置 配置属性 --> C/C --> 预编译头&#xff0c;并选择它&#xff1a;在右边的菜单中选择 “创建/使用预编译头”中的“不使用预编…

Telnet初试(本地测试)

win7下开启Telnet功能&#xff1a; 控制面板-程序和功能- 开启服务 然后回车 这样即可完成一次请求 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

您是否真的要加快Maven的编译/打包速度? 那么takari生命周期插件就是答案。

像你们中的许多人一样&#xff0c;我正在使用多模块Maven项目 。 与现有的许多系统相比&#xff0c;这不是一个很大的数目&#xff0c;它具有15个模块&#xff0c;3种不同的耳朵部署&#xff0c;带有属性文件的大量参数化以及大约10万行Java代码。 在开发高峰期&#xff0c;由于…

手机MMI体系结构及其实现

摘自&#xff1a;http://blog.csdn.net/zc2007/article/details/2340436 1引言 MMI&#xff08;ManMachineInter-face&#xff09;&#xff0c;即人机界面&#xff0c;它负责和用户的交互&#xff0c;在必要的时候调用其它模块的功能。MMI模块在整个系统中处于最 高层&#x…

Aspose.Words简单生成word文档

Aspose.Words简单生成word文档 Aspose.Words.Document doc new Aspose.Words.Document(); Aspose.Words.DocumentBuilder builder new Aspose.W…

ubuntu下安装JDK和netbeans

我在ubuntu下安装netbeans十分简单&#xff0c;我下载了jdk-7u1-nb-7_0_1-linux-ml.sh&#xff0c;直接在终端输入 sh jdk-7u1-nb-7_0_1-linux-ml.sh安装的向导就会启动&#xff0c;你只要选择JDK和netbeans安装的目录&#xff0c;向导就自动替你安装jdk和netbeans&#xff0c;…

在带有组合框的值列表的下拉列表中显示显示属性的子集

组合框值列表&#xff08;inputComboboxListOfValues&#xff09;应该是使用LOV的非常流行的ADF Faces组件。 坦白说&#xff0c;这是我最喜欢的值列表方法。 在这篇简短的文章中&#xff0c;我将重点介绍ADF开发人员经常忽略的一项功能。 如果默认情况下定义了LOV&#xff0c;…

具有WildFly,Arquillian,Jenkins和OpenShift的Java EE 7部署管道

技术提示&#xff03;54展示了如何Arquillianate&#xff08;Arquillianize&#xff1f;&#xff09;一个现有的Java EE项目并在WildFly在已知主机和端口上运行的远程模式下运行这些测试。 技术提示&#xff03;55展示了当WildFly在OpenShift中运行时如何运行这些测试。 这两个…