CSS3中哪些新属性—阴影、文本省略(1)
CSS3中的阴影,我知道的就是盒阴影和文字阴影。两者使用大同小异。
1.文字阴影
不知道为啥阴影会被开发出来,觉得这没啥好用啊。用了之后发现好像还行,使页面更有立体感了那么一点点。看起来趣味性强一点。
文字阴影:
text-shadow:x,y,z,color;
-x偏移量,x轴为文字左边
-y偏移量,y轴为文字顶部
-z:阴影模糊半径
-color:阴影颜色
注意:阴影可以添加多层!注意;中间逗号间隔,并且需要是完整的一套(就是三个数字都要有)。
eg: (多层颜色,红色和绿色。)
text-shadow:10px 10px 5px red, 20px 20px 6px green;
偏移量设置小一点,是不是美美哒,想看效果请狠狠点击。里面有代码!!!!
2.盒阴影
大同小异啦,但是还是有不一样的地方,仔细看看啦。
盒阴影:
box-shadow:x,y,z,h,color;
- inset (可选:写的话就是内阴影,不写的话就是外阴影)
-x轴偏移
-y轴偏移
-阴影模糊半径
-扩展阴影半径 (是用阴影颜色,填充扩展半径后,再进行阴影模糊)
-color:阴影颜色
3.文本省略
有时候文本太多装不下,怎么破???
使用文本省略,不再愁!!!
文本省略:
text-overflow:
- ellipsis 省略
- clip 剪切(不考虑使用,感官不好)
使用了文本省略为啥没有效果,因为中文文本会自动换行。
超出边框会溢出。
所以要配合
white-space:nowrap;(强制不换行)
overflow:hidden(溢出隐藏)
CSS3中哪些新属性—阴影、文本省略(1)的更多相关文章
- HTML5 中的新属性autocomplete="off"失效的解决方法(兼容firefox,IE,360)
因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...
- CSS3中的新特性
一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); - ...
- css3的一些新属性及部分用法
CSS3是CSS(层叠样式表)技术的升级版本,增加了很多新属性,我们在web开发中采用css3技术可以提高程序的性能以及用户体验.而且一般面试中会问到知道哪些新增加的属性,我们不可能将所有东西一一复述 ...
- CSS3中的一些属性
1. 可匹配部分字符串 2. box-sizing属性 3. CSS3多栏布局 1.可匹配部分字符串 /*^运算符,匹配字符串首部*/ a[href^='http://website'] /*$运算符 ...
- css3的Background新属性
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...
- CSS中的字体属性和文本属性
1.CSS字体的属性 font 简写,作用是把所有的针对字体的属性设置在一个声明中 font-family 设置字体系列 font-size 设置字体尺寸 font-style 设置字体风格,ital ...
- css3中的animation属性
作用:通过给元素添加animation属性,可以赋予该元素动画效果. <!DOCTYPE html><html> <head> <styl ...
- css3中的scroll-behavior属性
scroll-behavior属性 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,当用户通过鼠标滑 ...
- css3几个新属性
1.text-shadow 文字阴影 p{ text-shadow:2px 2px 10px #000; } 四个参数,依次: a:水平偏移 b:垂直偏移 c:阴影程度 d:阴影颜色 2.word- ...
随机推荐
- git.ZC_命令积累
1.删除文件 git rm 想要删除的文件的名字及其后缀 git commit -m "对本次提交的描述信息" git push 删除文件夹,执行命令: git rm 想要删除的文 ...
- 使用gitlab的webhook进行前端自动部署
gitlab有个功能叫webhook,比较适合前端代码的自动部署.其中的逻辑在 http://172.30.83.152:30080/help/user/project/integrations/w ...
- (136)leetcode刷题Python笔记——只出现一次的数字
题目如下: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 示例 1: ...
- linux下的dd命令使用详解
一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意:指定数字的地方若以下列字符结尾,则乘以相应的数字:b=512:c=1:k=1024:w=2 参数注释: 1. ...
- <每日一题> Day4:CodeForces-1042A.Benches(二分 + 排序)
题目链接 参考代码: /* 排序 + 每次取小 #include <iostream> #include <algorithm> using namespace std; co ...
- 【题解】1-2-K Game
题目大意 现有\(n\)个东西,每次可以取\(1\)个,\(2\)个或\(k\)个.Alice和Bob轮流取,且Alice先取.问谁是最后一个取的.(\(0 \leq n \leq 10^9\), ...
- Python之文件和异常IO
文件和异常 读写文本文件 读取文本文件时,需要在使用open函数时指定好带路径的文件名(可以使用相对路径或绝对路径)并将文件模式设置为'r'(如果不指定,默认值也是'r'),然后通过encoding参 ...
- 在react中用装饰器来装饰connect
假设我们在react中有如下header组件: import React, { PureComponent } from 'react'; import { connect } from 'react ...
- Codeforces - 1198C - Matching vs Independent Set - 贪心
https://codeforces.com/contest/1198/problem/C 要选取一个大小大于等于n的匹配或者选取一个大小大于等于n的独立集. 考虑不断加入匹配集,最终加入了x条边. ...
- asp.net 几种传值方法的分析
本文转自:http://www.cnblogs.com/shengtianlong/archive/2010/08/11/1797608.html ASP.NET页面传值方法的优缺点及适用范围 1. ...