浅玩CSS3 边框、背景、文本效果

一、边框

box-shadow

  1. box-shadow: h-shadow v-shadow blur spread color inset(ontset);
  2. //h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 spread:阴影的尺寸 color:阴影的颜色 inset(outset):内部阴影/外部阴影
    box-shadow: 5px 0 5px 0 #000 outset;//效果图如下

border-radius 圆角

  1. border-radius: 1-4 length|% / 1-4 length|%;
  2. //第一个参数:水平半径 第二个参数:垂直半径
  3.  
  4. border-radius: 50%/20%;//效果图如下

通过设置不同的边框圆角可以实现多种多样的边框盒子

border-image

  1. border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
  2. //边框图片url边框内偏移 边框宽度 边框图像区域超出边框的量 边框平铺(repeated)、铺满(rounded)、拉伸(stretched)

二、背景

background-size 规定背景图片尺寸

  1. background-size: length|percentage|cover|contain;
  2. //length:设置背景图片宽度和高度 percentage:根据父元素百分比设置背景图片宽度和高度 cover:背景图像扩展至足够大以使背景图像完全覆盖背景区域 contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

background-clip 规定背景的“绘制”区域

  1. background-clip: border-box|padding-box|content-box;

background-origin 规定背景图片的“定位”区域

  1. background-origin: padding-box|border-box|content-box;

PS:注意background-origin与background-clip的区别,一个是定位区域,一个是绘制区域

三、文本效果

text-shadow 文本阴影效果

  1. text-shadow: h-shadow v-shadow blur color;
    //h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 color:阴影颜色
    text-shadow: 5px 5px 3px #000;//效果图如下

word-wrap 允许对长的不可分割的单词进行分割并换行到下一行

  1. word-wrap: normal|break-word;
    //normal:只在允许的断字点换行 break-word:在长单词或url地址内部换行

word-break 规定非中日韩文本的换行规则

  1. 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. jQuery默认select选择第一个元素

    $("#id option:first").prop("selected", 'selected');

  2. vue 中获取到数据点击失效

    // var data = Object.assign([],ret.t); //动态创建dom后点击 元素不添加背景色 Object.assign(复制下)

  3. windows开机自启动bat脚本设置

    群里有朋友问到windows下如何设计开机自启动的脚本,一般而言小鱼大多还是在linux环境下运维,windows的bat了解的很少,windows运行机制也不是特别了解,不过既然朋友问到这个问题,虽 ...

  4. QBXT Day2

    遭遇[问题描述]你是能看到第一题的 friends呢.—— hjaN座楼房,立于城中 .第i座楼,高度 hi.你需要一开始选择座楼,开始跳楼. 在第 i座楼准备跳需要 ci的花费. 每次可以跳到任何一 ...

  5. [IOI2007]矿工配餐

    状态是f[i][a][b][c][d]表示第i个餐车,1号矿洞最近两顿是a,b,2号矿洞最近两顿是c,d. 给的空间是16MB,滚动数组滚动了第一维就行了 (给的变量是char是因为这个不超过256, ...

  6. Asp.Net使用Yahoo.Yui.Compressor.dll压缩Js|Css

    网上压缩css和js工具很多,但在我们的系统中总有特殊的地方.也许你会觉得用第三方的压缩工具很麻烦.我就遇到了这样问题,我不想在本地压缩,只想更新到服务器上去压缩,服务器压缩也不用备份之类的操作.于是 ...

  7. Eureka 服务的注册和发现

    二.Eureka 服务端 1.新建一个 maven module 子项目 microservicecloud-eureka-server 2.pom.xml <project xmlns=&qu ...

  8. 0419MySQL ORDER BY的实现分析

    转自:http://www.2cto.com/database/201202/120001.html 简朝阳 总的来说,在 MySQL 中的ORDER BY有两种排序实现方式,一种是利用有序索引获取有 ...

  9. codevs——T1267 老鼠的旅行

    http://codevs.cn/problem/1267/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...

  10. UVA The Tower of Babylon

    The Tower of Babylon Perhaps you have heard of the legend of the Tower of Babylon. Nowadays many det ...