【[css 揭秘]：CSS揭秘 技巧（一）：半透明边框】的更多相关文章

css rgba/hsla知识点讲解及半透明边框

一.RGBA(R,G,B,A) 参数: R:红色值.正整数 | |百分数 G:绿色值.正整数 | |百分数 B:蓝色值.正整数 | |百分数 A:Alpha透明度.取值0~1之间. 说明:此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA 颜色值得到以下浏览器的支持:IE9+.Firefox 3+.Chrome.Safari 以及 Opera 10+. 二.HSLA(h,s,l,a) HSL 指的是 hue(色调).saturation(饱和度).lightness(亮…

[css 揭秘]：CSS揭秘 技巧（一）：半透明边框

我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 hsla()但是在其他的属性中(比如边框)中使用半透明颜色并没有想象中那么容易哦! 假设我们想给一个容器设置一层白色的背景和一道半透明白色边框,boby的背景会从它的半透明边框透上来. 如果你单纯地这样写 是到达不到理想效果的 不信(你可以试试)边框跑哪里去了?如果使用半透明颜色都不能实现半透明边框,…

CSS揭秘-半透明边框与多重边框

场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为   解决方案: 使用background-clip 属性规定背景的绘制区域,使得绘制区域仅限制在content+padding. Div { border:10px solid rgba(0,0,0,.5); background: lightblue; background-clip: padding-box; } 补充: backg…

CSS揭秘（二）背景与边框

Chapter2 背景与边框 1. 半透明边框 基础:了解 RGBA & HSLA 颜色(色调 0~360.饱和度.亮度 (0%黑色~100%白色).透明度) 默认情况下,背景在边框的下层,容器的背景从半透明的边框透上来并覆盖了底层背景,如下图: (图片均来自于本书所带网站:http://play.csssecrets.io ,感谢作者的付出) border: 10px solid hsla(0,0%,100%,0.5); background: white;------------------…

css使用rgba()或hsla()设置半透明或完全透明边框border

在css中我们想实现透明颜色,首先就会想到rgba()和hsla()这2个属性.这篇文章就简单介绍下使用这2种方式来实现半透明边框. 1.使用rgba方式: border: 10px solid rgba(,,,.); 51220网站目录 https://www.51220.cn 说明:rgba分别对应红绿蓝和透明值,其中rgb区间为0(纯黑)至255(纯色)透明度a区间为0(完全透明)至1不透明. 2.使用hsla方式: background: white; border: 10px soli…

[CSS]《CSS揭秘》第四章——视觉效果

投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shadow:10px 0px 10px -10px black, -10px 0px 10px -10px black; *: box-shadow: h-shadow v-shadow blur/*模糊距离*/ spread/*阴影尺寸*/ color inset; 不规则投影 filter:drop-…

css随记01编辑技巧,背景与边框

代码优化 一个按钮的例子,使其值同比例变化; button{ color: white; background: #58a linear-gradient(#77a0bb, #58a); padding: 6px 16px; border-radius: 4px; //由padding+content构成,分别扩展 border: 1px solid #446d88; font-size: 20px; line-height: 30px; //shadow: insert <x/y> <…

IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则,描述文档中元素内容的表现形式,通过设置不同的规则控制页面中每一个元素的外观,包括字体的颜色和大小.线的宽度和颜色.页面中各项之间的空白量,以便使页面看上去更令人感兴趣.CSS和HTML一样是所有网页制作技术的核心与基础,是为HTML制定样式的机制,能控制浏览器如何显示HTML中的每个元素及其内容.…

DIV+CSS常用网页布局技巧！

以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left sidebar</div>  <div id="content">Main Content</div> CSS Code <style type="text/css"> *{    margin: 0;    paddi…

使用css时的一些技巧及注意事项

<!-- TITLE: 使用css时的一些技巧及注意事项 --> # CSS推荐书写顺序: 1. 位置属性(position, top, right, z-index, display, float等)2. 大小(width, height, padding, margin)3. 文字系列(font, line-height, letter-spacing, color- text-align等)4. 背景(background, border等)5. 其他(animation, transi…

兼容谷歌、火狐、IE7.0以上浏览器div+css实现的带有蒙版的半透明弹窗效果[xyytit]

整个页面变暗的蒙版效果,带有半透明边框的弹窗,用在网站里一定很酷. 最初见与奢饰品购物网站YMALL,后边研究了下,自己做了这个实例. 技术要点:css中几种透明样式的使用.不同的样式在不同的浏览器中的兼容性不同,所以需要采取组合使用才能兼容多个浏览器.详见:http://www.cnblogs.com/xyyt/p/3477156.html 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"…

web 前端2 html css一些小问题技巧

html css一些小问题技巧 1 对于儿子块float后,父亲块如果没内容就不见了,如何让父亲块依然跟随飘起了的儿子块撑起来呢?? 用到的属性after方法  公共方法作为继承即可. 1.1  方法1 clear + visibility + height <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title…

CSS进阶内容——布局技巧和细节修饰

CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然,如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园. 元素的显示与隐藏 在我们的网页设计中,也许会有广告的设计部分 广告旁常常存在×号来进行广告的关闭,而这部分内容在CSS中就被称为元素的显示与隐藏 本质: 让一个元素在页面中隐藏或显示出来 我们常常提供三种方法: di…

CSS border-right-style属性设置元素的右边框样式

CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性设置的是某一元素的右边框的样式. 语法格式如下: border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset border-right-style属性适…

css重修之书（一）：如何用css制作比1px更细的边框

如何用css制作比1px更细的边框 在项目的开发过程中,我们常常会使用到border:1px solid xxx,来对元素添加边框: 可是1px的border看起来还是粗了一些粗,不美观,那么有什么方法可以添加比1px更细的边框呢?这里我们可以用:before或者:after来解决: 1:设置横向的边框: .my_content{ position:relative;} .my_content:before{ position: absolute; right: 0; top: 0; left:…

css实现input文本框的双边框美化

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css实现input文本框的双边框美化</title><style type="text/css">.input_div{width:250px; height…

学无止境的CSS(xHTML+CSS技巧教程资源大全)

本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要学CSS,就应该先了解一下Web标准.尽管看上去不是必须的(我在学CSS之前,根本不知道也不想知道Web标准是 个啥玩意儿).应该说,你是否学Web标准,跟你是否能学会CSS没有什么关系,但跟你能写出什么样的CSS,以及XHTML或其它代码,跟你能做出什么 质量的网页有很大的关系. 其实我自己对We…

HTML+CSS笔记 CSS笔记集合

HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器,选择符 HTML+CSS笔记 CSS入门续集 涉及内容:继承,特殊性(权值),层叠,重要性 HTML+CSS笔记 CSS进阶 涉及内容:文字排版:字体,字号,颜色,粗体,斜体,下划线,删除线;段落排版:缩进,行间距,中文字间距(字母间距),对齐 HTML+CSS笔记 CSS进阶续集 涉及内容:元素分…

半透明边框与background-clip

在开始本章之前,我们要先简单介绍CSS中的半透明颜色.自2009年后,网页工作者们开始使用半透明颜色,如rgba().hsla().前者相信大家都很熟悉,不难理解其中将有四个参数,第四个参数则为透明度.而后者hsla()则是工业界的颜色标准,它包括了H:Hue(色调-- 用0或360表示红色,120表示绿色,240表示蓝色,也可取其他数值来确定其它颜色,一般取值范围为0~360):S:Saturation(饱和度--取值为:0% - 100%):L:Lightness(亮度--取值为:0% -…

CSS Vocabulary – CSS 词汇表，你都掌握了吗？

CSS 是前端开发必备技能,入门容易,深入难.比如像 Pseudo-class.Pseudo-element.Media query.Media type 以及 Vendor prefix 的概念,很多人都还很模糊.CSS Vocabulary 是一个很全的 CSS 词汇表,能帮助你轻松了解这些词汇的含义. 您可能感兴趣的相关文章 OverAPI.com – 史上最全开发人员在线速查手册 CSS Matic:网页设计师必备的终极 CSS 工具箱 前端文摘——网页图片优化的实用工具和技巧分享 Fe…

CSS Sprites (CSS图像拼合技术)教程工具

什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上. Sprite被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”. 上图是口袋妖怪的组合图片,可…

【CSS】 CSS基础知识 属性和选择

css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属性,这样的话样式只应用于这个标签: <h1 style="属性:属性值;属性2:属性值;"></h1> 2. 在文件头的<head>里面加上<style type="text/css">标签,标签里面以css的格式写样式,…

【Python全栈-CSS】CSS入门

CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.jianshu.com/p/a3da5e27d22b 01 python s3 day38 css的四种引入方式.ev4 02 python s3 day38 css的四种基本选择器.ev4 03 python s3 day38…

CSS样式----css样式表和选择器（图文详解）

本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器.伪类选择器 CSS样式优先级 前言 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的…

CSS sprites(css 精灵):将小图标整合到一张图片上

一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加http的请求,无疑促使了网站性能的减低,特别是图片特别多的网站,如果能用css sprites降低图片数量,带来的将是速度的提升. css sprites是什么通俗解释:CSS Sprites其实就是把网页中一…

HTML|CSS之CSS选择器及样式

知识内容: 1.CSS选择器 2.CSS常用样式 参考:http://www.cnblogs.com/yuanchenqi/articles/5977825.html 一.CSS选择器 1.基础选择器 通用元素选择器 *:  匹配任意元素 标签选择器:匹配所有指定标签的样式 id选择器:根据指定的id匹配标签 class类选择器:根据指定的class匹配标签 注:  可以对块级标签设置长宽,不可以对内联标签设长宽(它只会根据他的文字大小来变):另外一个id只能作用于一个标签,一个class可以作…

「CSS」css基础

1. 文字水平居中 将一段文字置于容器的水平中点,只要设置text-align属性即可: text-align:center; 2. 容器水平居中 先该容器设置一个明确宽度,然后将margin的水平值设为auto即可. div#container { width:760px; margin:0 auto; } 3. 文字垂直居中 单行文字的垂直居中,只要将行高与容器高设为相等即可. 比如,容器中有一行数字. <div id="container">1234567890<…

CSS：CSS+DIV布局网页

现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS. CSS盒模型: 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)…

盒模型 | CSS权重 | CSS层叠

span{ color:red;} *{ font-family:"楷体";line-height:2em; font-size:18px;} 盒模型 CSS定义所有的元素都可能拥有像盒子一样的外形和平面空间,即都包含边界.边框.补白.内容区域 网页中的大部分对象,实际呈现形式都是一个个盒子形状对象,页面都是由一个个盒子形状的区域拼合而成的. 盒模型关系到网页设计中排版.布局.定位等操作,任何元素都必须遵循盒模型规则. 包含:margin border padding content(…

前端之CSS：CSS选择器

前端之css样式(选择器)... 一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style…