css3 边框、背景、文本效果
浅玩CSS3 边框、背景、文本效果
一、边框
box-shadow
- box-shadow: h-shadow v-shadow blur spread color inset(ontset);
- //h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 spread:阴影的尺寸 color:阴影的颜色 inset(outset):内部阴影/外部阴影
box-shadow: 5px 0 5px 0 #000 outset;//效果图如下
border-radius 圆角
- border-radius: 1-4 length|% / 1-4 length|%;
- //第一个参数:水平半径 第二个参数:垂直半径
- border-radius: 50%/20%;//效果图如下
通过设置不同的边框圆角可以实现多种多样的边框盒子
border-image
- border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
- //边框图片url边框内偏移 边框宽度 边框图像区域超出边框的量 边框平铺(repeated)、铺满(rounded)、拉伸(stretched)
二、背景
background-size 规定背景图片尺寸
- background-size: length|percentage|cover|contain;
- //length:设置背景图片宽度和高度 percentage:根据父元素百分比设置背景图片宽度和高度 cover:背景图像扩展至足够大以使背景图像完全覆盖背景区域 contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
background-clip 规定背景的“绘制”区域
- background-clip: border-box|padding-box|content-box;
background-origin 规定背景图片的“定位”区域
- background-origin: padding-box|border-box|content-box;
PS:注意background-origin与background-clip的区别,一个是定位区域,一个是绘制区域
三、文本效果
text-shadow 文本阴影效果
- text-shadow: h-shadow v-shadow blur color;
//h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 color:阴影颜色
text-shadow: 5px 5px 3px #000;//效果图如下
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
- word-wrap: normal|break-word;
//normal:只在允许的断字点换行 break-word:在长单词或url地址内部换行
word-break 规定非中日韩文本的换行规则
- word-break: normal|break-all|keep-all;
// normal:使用浏览器默认换行规则 break-all:允许在单词内换行 keep-all:只能在半角空格或连字符处换行
css3 边框、背景、文本效果的更多相关文章
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- CSS3——边框 圆角 背景 渐变 文本效果
边框 圆角边框 盒阴影 边界图片 圆角 CSS3 圆角制作器 指定每个角 背景 多重背景图像 大小 图像的定位 背景剪裁 渐变 线性渐变(Linear Gradients)- 向下/向上/向左/向右/ ...
- 第95天:CSS3 边框、背景和文字效果
1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...
- 第 23 章 CSS3 边框图片效果
学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 提 ...
- 第八十节,CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 ...
- 第 21 章 CSS3 文本效果
学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 ...
- 第七十八节,CSS3文本效果
CSS3文本效果 一.文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow Opera ...
- css3边框与背景
一.css3边框 1.border-image 边框 border-image: url(xxx.png) number stretch 很好理解就是拉伸,有多长拉多长. repeat (和4角上 同 ...
- CSS3 边框 圆角 背景
CSS3用于控制网页的样式布局. CSS3是最新的CSS标准. 关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...
随机推荐
- jQuery默认select选择第一个元素
$("#id option:first").prop("selected", 'selected');
- vue 中获取到数据点击失效
// var data = Object.assign([],ret.t); //动态创建dom后点击 元素不添加背景色 Object.assign(复制下)
- windows开机自启动bat脚本设置
群里有朋友问到windows下如何设计开机自启动的脚本,一般而言小鱼大多还是在linux环境下运维,windows的bat了解的很少,windows运行机制也不是特别了解,不过既然朋友问到这个问题,虽 ...
- QBXT Day2
遭遇[问题描述]你是能看到第一题的 friends呢.—— hjaN座楼房,立于城中 .第i座楼,高度 hi.你需要一开始选择座楼,开始跳楼. 在第 i座楼准备跳需要 ci的花费. 每次可以跳到任何一 ...
- [IOI2007]矿工配餐
状态是f[i][a][b][c][d]表示第i个餐车,1号矿洞最近两顿是a,b,2号矿洞最近两顿是c,d. 给的空间是16MB,滚动数组滚动了第一维就行了 (给的变量是char是因为这个不超过256, ...
- Asp.Net使用Yahoo.Yui.Compressor.dll压缩Js|Css
网上压缩css和js工具很多,但在我们的系统中总有特殊的地方.也许你会觉得用第三方的压缩工具很麻烦.我就遇到了这样问题,我不想在本地压缩,只想更新到服务器上去压缩,服务器压缩也不用备份之类的操作.于是 ...
- Eureka 服务的注册和发现
二.Eureka 服务端 1.新建一个 maven module 子项目 microservicecloud-eureka-server 2.pom.xml <project xmlns=&qu ...
- 0419MySQL ORDER BY的实现分析
转自:http://www.2cto.com/database/201202/120001.html 简朝阳 总的来说,在 MySQL 中的ORDER BY有两种排序实现方式,一种是利用有序索引获取有 ...
- codevs——T1267 老鼠的旅行
http://codevs.cn/problem/1267/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Descr ...
- UVA The Tower of Babylon
The Tower of Babylon Perhaps you have heard of the legend of the Tower of Babylon. Nowadays many det ...