零基础建站培训介绍

当前位置:

CSS3常用属性手册

CSS3新增选择器有哪些:https://www.xuewangzhan.net/baike/css3-232.html

 


 

CSS3中的transform 变形功能:

transform:rotate():旋转  transform:skew():倾斜;transform:scale():缩放;transform:translate():变动 位移


 

CSS3中边框属性详解

border-radius:圆角边框&border-image:图片边框


 

CSS3中背景属性

  • background-clip:指定显示背景的范围
  • background-origin:开始显示的位置,一般是以图片为背景的时候使用
  • background-size:设置背景图像的宽度和高度
  • background-position属性:设置背景图像的起始位置。

overflow属性box-shadow:盒阴影及元素宽高计算方式

1、box-shadow:盒阴影
语法:
{box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色}

2、box-sizing属性:指定对元素宽,高的计算方法
语法:
box-sizing:content-box | border-box

3、text-overflow 属性规定当文本溢出包含元素时用省略号表示

(必须结合 

white-space: nowrap (文本不换行)和 overflow:hidden 和width属性一起使用

55
2

text-overflow: clip|ellipsis|string;
描述 测试
clip 修剪文本。 测试
ellipsis 显示省略符号来代表被修剪的文本。 测试
string 使用给定的字符串来代表被修剪的文本。

 


CSS3如何设置文字阴影与自动换行

CSS3如何设置文字阴影与自动换行

在CSS3中使用text-shadow属性来给文字添加阴影效果

h1{text-shadow: 5px 5px 5px #FF0000;}

自动换行

1、浏览器换行

body{word-break: normal|break-all|keep-all;}

描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。允许单词拆分
keep-all 只能在半角空格或连字符处换行。

2、文本换行

p{

white-space: nowrap
} 文本不换行
描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

CSS3中的动画功能之transtions和animations详解

div
{
width:100px;
transition: all 1s linear;;
-moz-transition: all 1s linear; /* Firefox 4 */
-webkit-transition: all 1s linear; /* Safari 和 Chrome */
-o-transition: all 1s linear; /* Opera */
}


使用CSS伪类:before, :after在网页插入内容

 

1、:before, :after在元素前后插入文字

5

2、:before, :after在元素前后插入图片6

 

3、:before在多个标题上添加连续编号
7

4、:before添加连续编号添加文字
8
5、:before添加连续编号的种类9

6、大编号嵌入小编号 
10

 

上一课: 下一课:

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签)的浮动布局,浮
  • Part I 这种选择器的共同特征:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用CSS3中共有11种UI元素状态伪类选择器:E:hover 
  • 在CSS3中使用display来定义盒的类型,一般分为block类型和inline类型。像p,div属于block类型,span,a属于inline类型。1、使用inline-block类型来横向
  • CSS中的ZOOM:1作用是什么 (11739 次学习)
    我们学习CSS3视频教程时,做网站经常会看到CSS代码里会有一个ZOOM:1,删除ZOOM:1属性对网页却没有任意影响。那么ZOOM:1到底有什么作用呢?下面就跟
  • 很多网站都有一个很大的问题,在这个浏览器上显示正常,但在其它浏览器显示却错位。这就是网站浏览器不兼容。如果你在自己建网站时也遇到了不同浏览
  • 我们在自己建网站时,经常需要用到background属性。我们还可以通过background-size来控制背景图片的尺寸。background-size有几个属性值,常用的是cov
  • HTML中,给一个DIV添加一个边框,那么这个DIV的宽度和高度就增加成为这个DIV的宽度加上这个边框的宽度,那么我们如何让边框不占宽度和高度呢?(相关
  • 在网页制作和网站开发过程中,网页上使用的字体往往由于浏览者电脑中没有相应的字体,达不到我们设计的效果。为了解决这个问题,我们可以直接使用我们
  • 特效介绍:响应式12列CSS网格样式代码是一款网格系统的特点是使用人们易于记忆的英文单词来作为设置网格列的class名称。特效截图:特效适用:适用
  • border-radius:圆角边框CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有