08.05 边框图片 盒子倒影 新增属性 文本阴影 文本属性 文本换行 文本溢出 文本修饰 文字描边 其他属性

---恢复内容开始---

### 边框图片

* border-image-source   图片地址

* border-image-slice     图片截取方式 值 浮点数/百分比

* border-iamge-width   边框图片厚度  值 长度单位

* border-image-outset   外延   值 长度单位

* borde-image-repeat    延伸方式  值 stretch/repeat/round/space

* border-image

border-image:source slice/width/outset repeat

* background-origin  padding-box/border-box/content-box

* background-clip     border-box/padding-box/content-box/text

-webkit-background-clip:text

* background-size    cover/contain/length length

###多重背景

多重背景渐变

# CSS文本属性

### 文本阴影

* text-shadow

text-shadow:offset_left offset_right blur  color

### 文本换行

* word-wrap  值 noraml/break-word   CSS改为 overflow-wrap

* word-break 值 normal/keep-all/break-all

* white-space  值 noraml/pre/nowrap/pre-wrap/pre-line

### 文本溢出

* text-overflow    值 clip/ellipsis  概述要生效 必须设置overflow不是visible值, 并且设置 white-space为nowrap

### 文字修饰

* text-decoation

* text-decoraion-line    none/underline/overline/line-through

* text-decoration-style   solid/dotted/double/dashed/wavy

* text-decoration-color

* text-decoration-skip

* text-decoration-position

### 文字描边

* -webkit-text-fill-color

* -webkit-text-stroke

* -webkit-text-stroke-width

* -weibkit-text-stroke-color

### 其他属性

* text-transform   值  none/capitalize/uppercase/lowercase

* tab-size  必须把white-space 设置为 pre/pre-wrap/pre-line 才生效  值 长度单位 规定制表符 长度

* text-align  start/end

* text-align-last 只设置最后一行   值 同text-align

时间: 08-06

08.05 边框图片 盒子倒影 新增属性 文本阴影 文本属性 文本换行 文本溢出 文本修饰 文字描边 其他属性的相关文章

CSS3 一、文本阴影text-shadow属性

文本阴影text-shadow属性特效: 1.右下角阴影,左下角阴影,左上角阴影,右上角阴影 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>text-shadow</title> 6 <style> 7 p{ 8 text-align:center; 9 margin:0

第23章 CSS边框图片效果

本章学习日后开发使用参考一下内容 https://www.qianduan.net/css3border-image-bian-kuang-tu-xiang-xiang-jie/ 或W3C 或者百度 未排版的PDF转WORD(不想排版了) 第 23章 CSS3边框图片效果学习要点:1.属性初探2.属性解释3.简写和版本 本章主要探讨 HTML5中 CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩.一.属性解释CSS3提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样

第 23 章 CSS3 边框图片效果

学习要点: 1.属性初探 2.属性解释 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样,边框就可以自定义了. 1.border-image-source      //引入背景图片地址2.border-image-slice         //切割引入背景图片3.border-image-width       //边框

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

CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样,边框就可以自定义了.     1.border-image-source                      //引入背景图片地址     2.border-image-slice                        

从零开始学 Web 之 CSS3(四)边框图片,过渡

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.边框图片 边框

边框图片

<style> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; margin:100px auto; box-sizing: border-box; border: 27px solid red; /*padding: 27px;*/ /*添加边框图片*/ /*border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点*/ border-image-source: url("

CSS3 --添加阴影(盒子阴影、文本阴影的使用)

CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种阴影的使用: 1,盒子阴影(1)盒子阴影的属性是 box-shadow1box-shadow:5px 5px 10px gray;前两个值分别表示阴影水平方向和垂直方向的偏移量.第三个值表示模糊距离.最后一个值是阴影颜色. (2)盒子阴影是可以随着盒子形状而自动变化的原文:CSS3 - 给div或者文

CSS3 边框图片

CSS3 边框图片 通过 CSS3 的 border-image 属性,可以使用图片来创建边框:border-image是用来代替border-style的,即border的大小取决于. 而且有border-image的侧边就没有border-shadow的什么事.哈哈,他俩冲突.注意,border-image不占用页面位置(他是脱离文档流的!!!). - 实现原理 - 参数解析 - - 图片切片border-image-slice - - 边框图片宽度border-image-width -

css3 border img 边框图片

摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘要 其实我[border-image属性]是用来给元素边框添加背景图像,在某些时候,利用这个 border-image可以轻松绘制一些比较复杂的小部件.并且我是 border-image-source border-image-slice border-image-widthborder-image