浅玩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 边框、背景、文本效果的更多相关文章

  1. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  2. CSS3——边框 圆角 背景 渐变 文本效果

    边框 圆角边框 盒阴影 边界图片 圆角 CSS3 圆角制作器 指定每个角 背景 多重背景图像 大小 图像的定位 背景剪裁 渐变 线性渐变(Linear Gradients)- 向下/向上/向左/向右/ ...

  3. 第95天:CSS3 边框、背景和文字效果

    1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...

  4. 第 23 章 CSS3 边框图片效果

    学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 提 ...

  5. 第八十节,CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3 ...

  6. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 ...

  7. 第七十八节,CSS3文本效果

    CSS3文本效果 一.文本阴影 CSS3提供了text-shadow文本阴影效果,这个属性在之前讲过,只是没有涉及浏览器 支持情况. 浏览器支持情况 text-shadow       Opera   ...

  8. css3边框与背景

    一.css3边框 1.border-image 边框 border-image: url(xxx.png) number stretch 很好理解就是拉伸,有多长拉多长. repeat (和4角上 同 ...

  9. CSS3 边框 圆角 背景

    CSS3用于控制网页的样式布局. CSS3是最新的CSS标准.   关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...

随机推荐

  1. MVC 数据传递

    public class HomeController : Controller { // GET: Home public ActionResult Index() //控制器名Home下默认的一个 ...

  2. [luogu4026 SHOI2008]循环的债务 (DP)

    传送门 吐槽洛谷难度标签qwq Solution 显然是一道神奇的DP,由于总钱数不变,我们只需要枚举前两个人的钱数就可知第三个人的钱数 DP的时候先枚举只用前k个币种,然后枚举前两个人的钱数,然后枚 ...

  3. Solr学习记录:Getting started

    目录 Solr学习记录:Getting started 1.Solr Tutorial 2. A Quick Overview Solr学习记录:Getting started 本教程使用环境:jav ...

  4. 游标后面select 带有in时

    今天遇到一个问题,使用游标时,在给游标填充值的时候,select  语句中带有 where查询条件,并且还有 in子句. 本来我是这样写的,试了很多次都不出结果,当然number in (304010 ...

  5. 一维数组快速转集合(List)

    String[] arr={"qwe","asd","zxc","asddf","hghgf"}; ...

  6. Spring Cloud-hystrix Dashboard(八)

    单机模式 1.创建一个dashboard项目 2.引入依赖 <!--histrix依赖--> <dependency> <groupId>org.springfra ...

  7. java陷阱之自动拆箱

    项目中突然报空指针异常 Integer code=null; code=code==null?500:code; 排查发现三元运算符空指针异常,表面上看不出来有什么问题,编译器编译的时候会保证:2边数 ...

  8. maven 自动部署到tomcat

    使用maven的自动部署功能可以很方便的将maven工程自动部署到远程tomcat服务器,减少部署时间,方便快捷. 一.配置tomcat manager 1.编辑tomcat目录下,conf/tomc ...

  9. LINUX内核内存屏障

    =================                          LINUX内核内存屏障                          ================= By ...

  10. 【Android界面实现】SlidingMenu最新版本号使用具体解释

    转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 在非常久之前的一篇文章中,简单的介绍了一下开源项目SlidingMenu控件的使用,这一篇文章,将比較具体的 ...