常用CSS3
(ಥ_ಥ) 啊啊,我的胃好疼啊。感觉最近胃又开始不舒服了。啊——果然老了呢,想当初,我也是不坏金刚之身来着呢,唉,我的可怜的小胃胃 (ಥ_ಥ)
记录几个已经常见的不能再常见的css3样式。
一、方框的阴影,box-shadow
E{
box-shadow: inset horizontal vertical blur spread color;
}
参数解释:
inset:可选。关键字。用于设置阴影位于元素内部还是外部,若未指定inset,阴影会位于外部。
horizontal:必选。长度值。设置阴影远离方框的水平距离。
vertical:必选。长度值。设置阴影远离方框的垂直距离。
blur:可选。长度值。设置模糊半径。
spread:可选。长度值。设置阴影扩散距离。正数让阴影比元素更大,负数让阴影比元素更小。
color:在webkit中,必选。在Firefox和Opera中,可选。若没有指明,color默认为黑色。
二、颜色与不透明度,opacity和rgba
1、使用opacity属性设置透明度,其语法格式如下:
E{
opacity: 0.5;
}
opacity属性值取0.0-1.0之间。0为透明,1为不透明。
opacity属性会被他的所有子元素继承。子元素,子元素,注意,不是孙子元素,不是所有后代,只有儿子!
这是HTML代码,查看使用opacity与不使用该属性的区别。
<div class='box'>
<div class='text'>
<p>南硕!我最喜欢的CP!</p>
</div>
</div>
首先是不使用,及其效果图:
.box{
background: url('../最后终于结婚.jpg');
padding:5px;
}
.text{
background:white;
}
p{
color: black;
}
不使用的效果图:
注意,opacity属性添加在其父元素上,添加在爷爷上面不会有继承。
.box{
background: url('../最后终于结婚.jpg');
padding:5px;
/* opacity:0.3; */
}
.text{
background:white;
opacity:0.3;
}
p{
color: black;
}
效果图:
其实这种效果并不是我们通常要的。因为让p里面的字,本来是黑色,也都变成有透明度的黑色了。
2、Alpha通道展示颜色。
CSS3引入Alpha作为RGBA颜色模型中的一个值。RGBA代表red、green、black和Alpha。使用方法与RGB类似,只是多了一个Alpha值。
rgba与opacity的区别:
(1)rgba是一个颜色值,所以无法用它去改变背景的不透明度。
(2)rgba只能应用在它指定的元素上,子元素可以否决所有的继承。
p{
color: black;
} .box1{
background: url('../最后终于结婚.jpg');
padding:5px;
/* opacity:0.3; */
}
.text1{
background-color:rgba(255,255,255,0.3);
}
对比一下,上面是用opacity属性,下面是用rgba属性。opacity中的p元素继承了透明度,而rgba里面的p元素没有继承透明度。
box-shadow与rgba相结合使用:
.box{
background: url('../复杂.jpg');
padding:5px;
}
p{
font-weight:;
text-shadow:5px 5px rgba(0,0,0,0.4)
}
效果图:
常用CSS3的更多相关文章
- 常用CSS3属性整理
常用CSS3属性整理 文本 文本超出部分折叠 white-space:nowarp; overflow:hidden; text-overflow:ellipsis word-warp 边界换行 no ...
- 对于72种常用css3的使用经验
对于72种常用css3的使用经验 保存网站源码 目的 保证有足够的css和js文件源码 拿到当前网页的整体布局 本地化 创建web项目 将web项目创建出来 在项目中创建一个文件夹 将所有的js和cs ...
- 常用css3技巧
H5移动前端开发常用高能css3汇总 1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强 html,body{ -webkit-touch-callout: none; //禁止或显示系 ...
- 几种常用CSS3样式
在我们日常工作中,由于考虑到浏览器的兼容性,所以很少用CSS3样式.关于其标准,W3C 仍然在对 CSS3 规范进行开发.不过,现代浏览器已经实现了相当多的 CSS3 属性.最近学习了CSS3,发现功 ...
- 常用css3属性的ie兼容查看
记录一下关于css3的各种常用属性对ie各版本浏览器的兼容程度: 最低可兼容ie7 最低可兼容ie8 最低可兼容ie9 最低可兼容ie10 position:fixed clip E:first-le ...
- 常用CSS3效果:用text-shadow做CSS3 文字描边
思路: 利用CSS3的text-shadow属性,对文字的四个边均用阴影. 最终效果: 单纯的为了实现效果.未作任何美化. 实现代码: HTML: <div>文字描边效果</div& ...
- 常用css3属性
总结一下在工作用常用到的属性设置 1.设置文本的可选择性 -webkit-user-select:none/text 2.设置背景的绘制区域 background-clip:border-box/pa ...
- 常用css3选择器
<div class="wrapper"> <p class="test1">1</p> <p class=" ...
- 【原】ZenCoding中常用的CSS3样式
用ZenCoding这么久了,总结下常用CSS3的写法,方便以后查找: Property Alias @media print {} @m box-sizing:border-box; bxz:bb ...
随机推荐
- 我从来不理解JavaScript闭包,直到有人这样向我解释它...
摘要: 理解JS闭包. 原文:我从来不理解JavaScript闭包,直到有人这样向我解释它... 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正如标题所述,JavaScript闭包 ...
- WebStorm 配置微信小程序开发 用html样式打开wxml 用css样式打开wxss 配置微信小程序提醒
1.点开preferences 2.搜索找到“File Types” 3.找到"HTML",点击“+”按钮,添加“*.wxml”然后“apply” 4.和3一样,再找到 ‘casc ...
- vue安装element-ui和px2rem的细节
1.按需引入element-ui vue脚手架搭建完成之后,可以到element-ui官网进行npm 安装: npm i element-ui -S 如果是完整引入可以按照官网一步一步做即可完成:这里 ...
- Windows编译OpenCV4Android解决undefined reference to std错误
注意OpenCV 4.0.1 解决了这个问题请直接下载OpenCV 4.0.1 但是OpenCV 4.0.1作为模块导入Android Studio会有找不到R.styleable的问题 OpenCV ...
- MongoDB数据库的设计规范
MongoDB是非关系型数据库的典型代表,DB-Engines Ranking 数据显示,近年来,MongoDB在NoSQL领域一直独占鳌头.MongoDB是为快速开发互联网应用 而设计的数据库系统, ...
- C#微信支付对接
c#版在pc端发起微信扫码支付 主要代码: /** * 生成直接支付url,支付url有效期为2小时,模式二 * @param productId 商品ID * @return 模式二URL */ ...
- c/c++ linux 进程 fork wait函数
linux 进程 fork wait函数 fork:创建子进程 wait:父进程等待子进程结束,并销毁子进程,如果父进程不调用wait函数,子进程就会一直留在linux内核中,变成了僵尸进程. for ...
- SQLServer之创建非聚集索引
开始之前 典型实现 可以通过下列方法实现非聚集索引: UNIQUE 约束 在创建 UNIQUE 约束时,默认情况下将创建唯一非聚集索引,以便强制 UNIQUE 约束. 如果不存在该表的聚集索引,则可以 ...
- Docker: 快速搭建LNMP网站平台
快速搭建LNMP网站平台 步骤: 1.自定义网络(这里建立一个自定义网络,名字叫 lnmp, 让LNMP网站的服务,都加入这个自定义网络)docker network create lnmp2.创建M ...
- 【English】20190313
indicators指针['ɪndɪkeɪtəz] determine决定[dɪˈtɜ:rmɪn] Places null indicator bits at the front of each ...