css3_css3.0手册 - CSDN
css3 订阅
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 [1]  。CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂 [2]  。 展开全文
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 [1]  。CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新,因此通过采用模块方法,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性,这也让跨浏览器开发变得复杂 [2]  。
信息
外文名
Cascading Style Sheets Level 3
草案完成时间
2001年5月23日
简    称
CSS3
中文名
层叠样式表3级
制订时间
1999年
CSS3发展进程
早在2001年W3C就完成了CSS3的草案规范。CSS3规范的一个新特点是被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布,及时调整模块的内容,这些模块独立实现和发布,也为日后CSS的扩展奠定了基础。另外一方面,由于受支持设备和浏览器厂商的限制,设备或者厂商可以有选择的支持一部分模块,支持CSS3的一个子集,这样有利于CSS3的推广 [3]  。以下为截至2019年12月,CSS3各模块的规范情况: [35] 
收起全文
精华内容
参与话题
  • css3全面学习

    2020-03-31 11:14:16
    结构框架:分为六个部分(属性、选择符、语法与规则、取值、css单位以及附录) 第一部分:属性(定位、布局、弹性盒模型、尺寸、外补白、内补白、边框、背景、颜色、字体、列表、表格、内容、用户界面、多栏、2D变换...

    结构框架:分为六个部分(属性、选择符、语法与规则、取值、css单位以及附录)

    第一部分:属性(定位、布局、弹性盒模型、尺寸、外补白、内补白、边框、背景、颜色、字体、列表、表格、内容、用户界面、多栏、2D变换、过渡、动画、打印、媒体查询、only IE、only Firefox、only webkit)

    第二部分:选择符(元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符)

    第三部分:语法与规则(!Important、/comment/、@import、@charset、@media、#font-face、@page、@keyframes)

    第四部分:取值(颜色、文本、函数、图像、数字、其他)

    第五部分:css单位(长度、角度、时间、频率、布局)

    第六部分:附录(颜色关键字、媒体类型、css条件hack、css属性hack、css选择符hack、cssbugs解决方案、css技巧和经验、css其他技巧)


    第一部分:属性

    第一节:定位(position、z-index、top、right、bottom、left)

    第二节:布局(display、float、clear、visibility、clip、overflow、overflow-xoverflow-y

    display:none 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
    inline指定对象为内联元素。
    block指定对象为块元素。
    list-item指定对象为列表项目。
    inline-block指定对象为内联块元素。(CSS2)
    table指定对象作为块元素级的表格。类同于html标签<table>(CSS2)
    inline-table指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)
    table-caption指定对象作为表格标题。类同于html标签<caption>(CSS2)
    table-cell指定对象作为表格单元格。类同于html标签<td>(CSS2)
    table-row指定对象作为表格行。类同于html标签<tr>(CSS2)
    table-row-group指定对象作为表格行组。类同于html标签<tbody>(CSS2)
    table-column指定对象作为表格列。类同于html标签<col>(CSS2)
    table-column-group指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)
    table-header-group指定对象作为表格标题组。类同于html标签<thead>(CSS2)
    table-footer-group指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)
    compact分配对象为块对象或基于内容之上的内联对象(CSS3)
    run-in分配对象为块对象或基于内容之上的内联对象(CSS3)
    ruby将对象作为表格脚注组显示(CSS3)
    ruby-base将对象作为表格脚注组显示(CSS3)
    ruby-text将对象作为表格脚注组显示(CSS3)
    ruby-base-group将对象作为表格脚注组显示(CSS3)
    ruby-text-group将对象作为表格脚注组显示(CSS3)
    box将对象作为弹性盒模型显示(CSS3)-webkit-box;-moz-box;-o-box;-ms-box;
    inline-box将对象作为内联块级弹性盒模型显示(CSS3)

    clip:rect(0 auto 35px 10px) 上边不剪切,右边不剪切,下边从第35个像素开始剪切直至最底部,左边剪10
    在这里插入图片描述

    overflow:visible 不剪切内容
    hidden将超出对象尺寸的内容进行裁剪,将不出现滚动条。
    scroll将超出对象尺寸的内容进行裁剪,并以滚动条的方式显示超出的内容。
    auto在需要时剪切内容并添加滚动条,此为body对象和textarea的默认值。

    第三节:弹性盒模型(box-orient子元素排列方式、box-pack子元素对齐方式、box-align子元素对齐方式、box-flex子元素如何分配剩余盒子的剩余空间、box-flex-group子元素的所属组、box-ordinal-group子元素的显示顺序、box-direction子元素顺序是否相反、box-lines子元素是否可以换行显示)要使其生效需给父级元素display为box或者是inline-box;注意浏览器

    box-orient 定义盒子内部元素的方向排列方式
    horizontal(水平线上从左到右) vertical(垂直线上从上到下)
    inline-axis(水平编排)、block-axis(垂直编排)、inherit(继承父级元素)
    在这里插入图片描述在这里插入图片描述


    box-pack:start 设置弹性盒模型对象的子元素从开始位置对齐(大部分情况等同于左对齐)
    center设置弹性盒模型对象的子元素居中对齐
    end设置弹性盒模型对象的子元素从结束位置对齐(大部分情况等同于右对齐)
    justify设置或弹性盒模型对象的子元素两端对齐
    在这里插入图片描述

    box-align:start 设置弹性盒模型对象的子元素从开始位置对齐
    center设置弹性盒模型对象的子元素居中对齐
    end设置弹性盒模型对象的子元素从结束位置对齐
    baseline设置弹性盒模型对象的子元素基线对齐
    stretch设置弹性盒模型对象的子元素自适应父元素尺寸
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述


    box-flex:0让子元素按照父元素的宽度划分 将一个容器分成6份,子对象a分1份,b分2份,c分3份(动态的分配剩余空间)
    在这里插入图片描述


    box-flex-group:1 动态的给数字较大的组分配其内容所需的实际空间(如无内容、paddin、border则不占空间),剩余空间则均分给数字最小的那个组(可能有1个或多个元素)

    box-ordinal-group:1 调整三个栏目的先后顺序,数字越大越靠后, 数值较低的元素显示在数值较高元素的前面,相同数值的元素,它们的显示顺序取决于它们的代码顺序
    在这里插入图片描述

    box-direction:normal 确定内部元素的排列顺序
    normal、reverse(翻转)、inherit 设置弹性盒模型对象的子元素按正常顺序排列
    reverse反转弹性盒模型对象的子元素的排列顺序

    box-lines:single 弹性盒模型对象的子元素只在一行内显示
    multiple弹性盒模型对象的子元素超出父元素的空间时换行显示

    第四节:尺寸(width、min-width、max-width、height、min-height、max-height)
    第五节:外补白(margin、margin-top、margin-right、margin-bottom、margin-left)
    第六节:内补白(padding、padding-top、padding-right、padding-bottom、padding-left)
    第七节:边框(border、border-width、border-style、border-color、border-top、border-top-width、border-top-style、border-top-color、border-right、border-right-width、border-right-style、border-right-color、border-bottom、border-bottom-width、border-bottom-style、border-bottom-color、border-left、border-left-width、border-left-style、border-left-color、border-image、border-radius、border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius、box-shadow阴影、box-reflect倒影

    border-image:border-image-sourceborder-image-slice / border-image-width / border-image-outset / border-image-repeat
    none:无背景图片。
    <url>使用绝对或相对地址指定图像。
    <number>用浮点数指定宽度。不允许负值。
    <percentage>用百分比指定宽度。不允许负值。
    <length>用长度值指定宽度。不允许负值。
    stretch:指定用拉伸方式来填充边框背景图。
    repeat:指定用平铺方式来填充边框背景图。当图片碰到边界时,如果超过则被截断。
    round:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。

    border-image:url(skin/border.png) 27/27px;


    box-shadow
    none:无阴影
    <length>①第1个长度值用来设置对象的阴影水平偏移值。可以为负值
    <length>②第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
    <length>③如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
    <length>④如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
    <color>设置对象的阴影的颜色。
    inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
    box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);


    box-reflect:none | <direction> | <offset> | <mask-box-image>
    <direction> = above | below | left | right
    <offset> = <length> | <percentage>
    <mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> |<repeating-radial-gradient>
    默认值:none无倒影
    box-reflect:below 0 linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));

    第八节:背景(background、background-color、background-image、background-repeat、background-attachment背景图片是滚动还是固定、background-position、background-origin、background-clip、background-size、multiple-background混合属性

    background-image:-moz-linear-gradient(top , #45B5DA, #0382AD);渐变背景
    background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));渐变背景
    background-image:-o-linear-gradient(top , #45B5DA, #0382AD);渐变背景
    background-image:url(skin/p_103x196_1.jpg),url(skin/p_103x196_2.jpg),url(skin/p_103x196_3.jpg);多重背景
    background:linear-gradient(top,#000,#999)。从上到下、从黑色到灰色水平方向渐变
    background:linear-gradient(left,#000,#999)。起始于左边、从黑色到灰色垂直方向渐变
    background:linear-gradient(left,30deg,#000,#999)。起始于左边,倾斜30度、从黑色到灰色水平渐变
    background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

    第九节:颜色(color、opacity)
    第十节:字体(font、font-style、font-weight、font-size、font-family、font-stretch)
    第十一节:文本(text-indent、text-overflow、text-align、text-transform、text-decration、text-decoration-line、text-decoration-color、text-decoration-style、text-shadow、text-fill-color、text-stroke、text-stroke-width、text-stroke-color、letter-spacing、word-spacing、vertical-align、word-wrap、white-space、direction、unicode-bidi、line-height、tab-size)

    text-overflow
    clip:当对象内文本溢出时不显示省略标记(…),而是将溢出的部分裁切掉。
    ellipsis:当对象内文本溢出时显示省略标记(…)。

    text-transform
    none:无转换
    capitalize:将每个单词的第一个字母转换成大写
    uppercase:转换成大写
    lowercase:转换成小写
    full-width:
    full-size-kana:

    white-space
    normal:默认处理方式。
    pre:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象
    nowrap:强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。
    pre-wrap:用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。
    pre-line:保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。

    direction
    ltr:文本流从左到右。
    rtl:文本流从右到左

    unicode-bidi
    normal:对象不打开附加的嵌入层,对于内联要素,隐式重排序跨对象边界进行工作。
    embed:对象打开附加的嵌入层,direction属性的值指定嵌入层,在对象内部进行隐式重排序。

    bidi-override
    严格按照direction属性的值重排序。忽略隐式双向运算规则。
    用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
    假如您想应用direction属性于内联元素的文本,您必须设定unicode-bidi属性为embed或bidi-override。

    第十二节:列表(list-style、list-style-image、list-style-position、list-style-type)

    list-style-type
    disc:实心圆(CSS1)
    circle:空心圆(CSS1)
    square:实心方块(CSS1)
    decimal:阿拉伯数字(CSS1)
    lower-roman:小写罗马数字(CSS1)
    upper-roman:大写罗马数字(CSS1)
    lower-alpha:小写英文字母(CSS1)
    upper-alpha:大写英文字母(CSS1)
    none:不使用项目符号(CSS1)
    armenian:传统的亚美尼亚数字(CSS2)
    cjk-ideographic:浅白的表意数字(CSS2)
    georgian:传统的乔治数字(CSS2)
    lower-greek:基本的希腊小写字母(CSS2)
    hebrew:传统的希伯莱数字(CSS2)
    hiragana:日文平假名字符(CSS2)
    hiragana-iroha:日文平假名序号(CSS2)
    katakana:日文片假名字符(CSS2)
    katakana-iroha:日文片假名序号(CSS2)
    lower-latin:小写拉丁字母(CSS2)
    upper-latin:大写拉丁字母(CSS2)

    第十三节:表格(table-layout、border-collapse、border-spacing、caption-side、empty-cells)
    第十四节:内容(content、counter-increment、counter-reset、quotes)

    content
    normal:默认值。表现与none值相同
    none:不生成任何值。
    <attr>插入标签属性值
    .attr p:after{content:attr(title);}
    <url>使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源)
    .url p:before{content:url(…/…/skin/ico.png);}
    <string>插入字符串
    counter(name):使用已命名的计数器
    .counter1 li:before{content:counter(testname);}
    counter(name,list-style-type):使用已命名的计数器并遵从指定的list-style-type属性
    .counter2 li:before{content:counter(testname2,lower-roman);}
    counters(name,string):使用所有已命名的计数器
    .counter3 li{counter-increment:testname3;}
    .counter3 li:before{content:counter(testname3,decimal)".";}
    counters(name,string,list-style-type):使用所有已命名的计数器并遵从指定的list-style-type属性
    no-close-quote:并不插入quotes属性的后标记。但增加其嵌套级别
    .counter3 li li:before{content:counter(testname3,decimal)".“counter(testname4,decimal)”.";}
    no-open-quote:并不插入quotes属性的前标记。但减少其嵌套级别
    close-quote:插入quotes属性的后标记
    open-quote:插入quotes属性的前标记
    counter-increment:none |[<identifier> <integer>]

    第十五节:用户user interface(outline、outline-width、outline-style、outline-color、outline-offset、nav-index、nav-up、nav-right、nav-down、nav-left、cursor、zoom、box-sizing、resize、ime-mode)

    **outline**定义元素周围轮廓线,类似于border
    outline-width :指定轮廓边框的宽度。
    outline-style :指定轮廓边框的样式。
    outline-color :指定轮廓边框的颜色。
    outline:2px solid #f00;border:3px solid #333;
    在这里插入图片描述
    outline-width
    <length>用长度值来定义轮廓的厚度。不允许负值
    medium:定义默认宽度的轮廓。
    thin:定义比默认宽度细的轮廓。
    thick:定义比默认宽度粗的轮廓。

    outline-style
    none:无轮廓。与任何指定的outline-width值无关
    dotted:点状轮廓。
    dashed:虚线轮廓。
    solid:实线轮廓
    double:双线轮廓。两条单线与其间隔的和等于指定的outline-width值
    groove:3D凹槽轮廓。
    ridge:3D凸槽轮廓。
    inset:3D凹边轮廓。
    outset:3D凸边轮廓。
    outline-offset:4px;
    在这里插入图片描述
    cursor [<url> [<x> <y>] [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll]

    resize
    none:不允许用户调整元素大小。
    both:用户可以调节元素的宽度和高度。
    horizontal:用户可以调节元素的宽度
    vertical:用户可以调节元素的高度。
    none:不允许用户调整元素大小。
    both:用户可以调节元素的宽度和高度。
    horizontal:用户可以调节元素的宽度
    vertical:用户可以调节元素的高度。

    第十六节:多栏multi-column(columns、column-width、column-count、column-gap、column-rule、column-rule-style、column-rule-color、column-span、column-fill、column-break-before、column-break-after、column-break-inside)

    columns:200px 3;
    在这里插入图片描述
    columns:200px;
    在这里插入图片描述
    column-count:3;column-gap:40px;
    在这里插入图片描述

    第十七节:2D变换(transform、transform-origin)

    translate移动。translate(X(距离left位置),Y(距离top位置))。以坐标轴原点为中心进行位移,正值向右下角移动。
    1旋转。transfrom:rotate(10deg)。平面旋转多少度
    2斜拉。skew(X,Y)。倾斜多少度
    3缩放。scale(X,Y)。放大或缩小多少倍
    4移动。translate(X,Y)

    transfrom:rotate(30deg)。
    transfrom:scale(X,Y)。
    transfrom:skew(X,Y)。
    transfrom:translate(X,Y)。
    

    所有2D转换方法连在一起就是matrix()。矩形方式进行变换matrix();
    改变起点位置:transfrom-origin:bottom left

    eg:transfrom:scale(1.5)。
    对应的matrix是 transfrom:matrix(1.5,0,0,1.5,0,0);
    
    matrix(scaleX,0,0,scaleY,0,0)
    

    深究矩阵 matrix

    在这里插入图片描述
    matrix()和matrix3d(),前者是2D的平面移动变换,33。后者是3D变换,44。
    transfrom:matrix(a , b , c , d , e , f)
    所对应的矩阵如下图
    在这里插入图片描述在这里插入图片描述
    第一个与第一个相乘,第二个与第二个相乘,第三个与第三相乘
    在这里插入图片描述
    ax+cy+e 为水平坐标。bx+dy+f 为垂直坐标。

    transfrom:matrix(1 , 0 , 0 ,1 , 30 ,30)//a=1,b=0,c=0,d=1,e=30,f=30。
    假设中心坐标为(0 ,0)
    x坐标为 ax+cy+e = 10 + 00 +30 = 30。
    y坐标为 bx+dy+f = 00 + 10 + 30 = 30。
    中心坐标变为了(30 ,30) 向右下角偏移,transfrom:translate(30px, 30px)
    所以matrix只用关心最后两个参数就可以了
    缩放:transfrom:matrix(1 , 0 , 0 ,1 , 30 ,30)当中的1是缩放的参数,所以写为transfrom:matrix(scalex ,0, 0 ,scaley ,30 ,30)

    第十八节:过渡

    transition-property:过渡效果的css属性名称。none、all、indent
    transition-duration:过渡的时长。
    transition-timing-function:过渡速度曲线。平缓还是先慢后快。
    transition-delay:过渡延迟。

    第十九节:动画(animation-timing-function)

    animation-name:动画名称。
    animation-delay:动画延迟。
    animation-duration:动画运动周期时长。
    animation-timing-function:动画速度曲线。linear(速度一致)、ease(低速开始,然后加快,结束慢)、ease-in(低速开始)、ease-out(低速结束)、ease-in-out(低速开始和结束)、cubic-bezier(自己的值,从0到1)
    animation-iteration-count:动画播放次数。0、infinite。
    animation-direction:动画是否在下一个周期逆向播放。normal、alternate。
    animation-play-state:动画是否正在运行或暂停。
    animation-fill-mode

    简写:animation:name duration timing-function delay

    @keyframes  animationName{
    	from{ ...... }
    	to{ ...... }
    }
    @keyframes animationName{
    	0%{ ...... }
    	50%{ ...... }
    	100%{ ...... }
    }
    
    展开全文
  • 细说CSS(CSS+CSS3)

    千人学习 2019-12-18 15:11:02
    本课程包含7章45个小节课程,内容涵盖:CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。
  • CSS3

    千次阅读 2019-05-29 01:45:06
    一、CSS3中新特性样式篇 1.1 背景 1.1.1 background-origin: 规定背景图片的定位区域。 padding-box 背景图像相对内边距定位(默认值) border-box 背景图像相对边框定位【以边框左上角为参照进行位置设置】 ...

    一、CSS3中新特性样式篇

    1.1 背景

    1.1.1 background-origin: 规定背景图片的定位区域。

    padding-box 背景图像相对内边距定位(默认值)
    border-box 背景图像相对边框定位【以边框左上角为参照进行位置设置】
    content-box 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】

    备注:默认盒子的背景图片是在盒子的内边距左上角对齐设置

    1.1.2 background-clip: 规定背景的绘制区域。

    border-box 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】
    padding-box 背景被裁切到内边距区域【将背景图片在内边距区域(包含内容区域)显示】
    content-box 背景被裁切到内容区域【将背景图片在内容区域显示】

    1.1.3 background-size: 规定背景图片的尺寸。

    cover
    contain

    1.2 边框

    box-shadow: 盒子阴影
    border-radius: 边框圆角
    border-image: 边框图片
    border-image-source: url(“2.png”); //设置边框图片
    border-image-slice: 20; //边框图片裁切 : 不需要带单位
    border-image-repeat: stretch | round | repeat; //设置边框图片的平铺方式
    border-image-width: 20px;

    1.3 文本

    text-shadow: 设置文本阴影

    二、CSS3新特性之选择器篇

    2.1 属性选择器:

    [属性名=值] {}
    [属性名] {} 匹配对应的属性即可
    [属性名^=值] {} 以值开头
    [属性名*=值] {} 包含
    [属性名$=值] {} 以值结束

    2.2 结构伪类选择器:

    :first-child {}     选中父元素中第一个子元素
    :last-child {}	  选中父元素中最后一个子元素
    :nth-child(n) {}    选中父元素中正数第n个子元素
    :nth-last-child(n) {}    选中父元素中倒数第n个子元素
    

    备注;n 的取值大于等于0l可以设置预定义的值;可以是一个表达式(an+b的格式)
    odd[选中奇数位置的元素]
    even【选中偶数位置的元素】

    2.3 其他选择器:

    :target          被锚链接指向的时候会触发该选择器
    ::selection	     当被鼠标选中的时候的样式
    ::first-line	   选中第一行
    ::first-letter	 选中第一个字符
    

    三、CSS3新特性之颜色渐变

    3.1 线性渐变:

    1. 开始颜色和结束颜色
    2. 渐变的方向
    3. 渐变的范围
    background-image:  linear-gradient(to right, red, blue);
    

    表示方向:

    1. to + right | top | bottom | left
    2. 通过角度表示一个方向: 0deg [从下向上渐变] ; 90deg【从左向右】

    3.2 径向渐变:

    background-image: radial-gradient(100px at center, red, blue);
    

    四、2D转换

    4.1 位移

    transform: translate(100px,100px);
    

    备注:位移是相对元素自身的位置发生位置改变

    4.2 旋转

    transform: rotate(60deg);
    

    备注:取值为角度

    4.3 缩放

    transform: scale(0.5,1);
    

    备注:取值为倍数关系,缩小大于0小于1,放大设置大于1

    4.4 倾斜

    transform: skew(30deg,30deg);
    

    备注:第一个值代表沿着x轴方向倾斜,第二个值代表沿着y轴方向倾斜

    五、3D转换

    5.1 位移

    transform: translateX()  translateY()   translateZ()
    

    5.2 旋转

    transform: rotateX(60deg)  rotateY(60deg)  rotateZ(60deg);
    

    5.3 缩放

    transform: scaleX(0.5)  scaleY(1)  scaleZ(1);
    

    5.4 倾斜

    transform: skewX(30deg) skewY();
    

    5.5 将平面图形转换为立体图形

    transform-style: preserve-3d;
    

    六、CSS3新特性之动画篇

    https://www.cnblogs.com/afighter/p/5731293.html

    6.1 过渡

    transition-property: all;						//设置哪些属性要参与到过渡动画效果中: all 
    transition-duration: 1s;						//设置过渡执行时间
    transition-delay: 1s;								//设置过渡延时执行时间
    transition-timing-function: linear;	//设置过渡的速度类型
    

    6.2 动画

    /* 1定义动画集 */
    @keyframes  rotate {
        /* 定义开始状态  0%*/
        from {
            transform: rotateZ(0deg);
        }
        /* 结束状态 100%*/
        to {
            transform: rotateZ(360deg);
        }
    }
    

    注意:如果设置动画集使用的是百分比,那么记住百分比是相对整个动画执行时间的。

    七、CSS3新特性之网页布局篇

    伸缩布局或者弹性布局【响应式布局】

    7.1 设置父元素为伸缩盒子【直接父元素】

    display: flex
    

    为什么在伸缩盒子中,子元素会在一行上显示?

    1. 子元素是按照伸缩盒子中主轴方向显示
    2. 只有伸缩盒子才有主轴和侧轴
    3. 主轴: 默认水平从左向右显示
    4. 侧轴: 始终要垂直于主轴

    7.1.1 设置伸缩盒子主轴方向(flex-direction)

    flex-direction: row; 【默认值】
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;
    

    7.1.2 设置元素在主轴的对齐方式( justify-content)

    justify-content: flex-start;
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    

    7.1.3 设置元素在侧轴的对齐方式 (align-items)

    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    align-items: stretch;	/* 默认值 */
    

    7.1.4 设置元素是否换行显示(flex-wrap)

    在伸缩盒子中所有的元素默认都会在一行上显示,如果希望换行

    flex-wrap: wrap | nowrap;
    

    7.1.5 设置元素换行后的对齐方式( align-content)

    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-around;
    align-content: space-between;
    align-content: stretch;		///* 换行后的默认值 */
    
    展开全文
  • HTML5和CSS3

    千人学习 2020-03-30 18:13:54
    HTML5新特性和CSS3的使用案例,从入门到精通。
  • CSS3选择器大全

    万次阅读 2018-08-16 13:49:26
    1.CSS3选择器 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。 input[type=&quot;text&quot;] { width:150px; display:block; ...

    1.CSS3选择器 属性选择器
    在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。

    input[type="text"]
    {
      width:150px;
      display:block;
      margin-bottom:10px;
      background-color:yellow;
      font-family: Verdana, Arial;
    }

    在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示:

    这里写图片描述

    2.CSS3 结构性伪类选择器—root
    :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>
    :root选择器等同于<html>元素,简单点说:

    :root{background:orange}
    html {background:orange;}

    得到的效果等同。
    建议使用:root方法。

    3.CSS3 结构性伪类选择器—not
    :not选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。
    就拿form元素来说,比如说你想给表单中除submit按钮之外的input元素添加红色边框,CSS代码可以写成:

    input:not([type="submit"]){
      border:1px solid red;
    }

    4.CSS3 结构性伪类选择器—empty
    :empty选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。
    比如说,你的文档中有三个段落p元素,你想把没有任何内容的P元素隐藏起来。我们就可以使用:empty选择器来控制。

    p:empty {
      display: none;
    }

    5.CSS3 结构性伪类选择器—target
    :target选择器称为目标选择器,用来匹配文档(页面)的url的某个标志符的目标元素。

    6.CSS3 结构性伪类选择器—first-child
    :first-child选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。

    7.CSS3 结构性伪类选择器—last-child
    :last-child选择器与:first-child选择器作用类似,不同的是:last-child选择器选择的是元素的最后一个子元素。

    8.CSS3 结构性伪类选择器—nth-child(n)
    :nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。

    经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。如下表所示:
    这里写图片描述

    9.CSS3 only-child选择器
    :only-child选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。

    10.CSS3选择器 :enabled和:disabled选择器
    在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器:enabled对这些表单元素设置样式。

    :disabled选择器刚好与:enabled选择器相反,用来选择不可用表单元素。要正常使用:disabled选择器,需要在表单元素的HTML中设置“disabled”属性。

    11.CSS3选择器 :checked选择器
    在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。(大家都知道,要覆写这两个按钮默认样式比较困难)。在CSS3中,我们可以通过状态选择器:checked配合其他标签实现自定义样式。而:checked表示的是选中状态。

    12.CSS3选择器 ::selection选择器
    ::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下,用鼠标选择网页文本是以“深蓝的背景,白色的字体”显示的。

    13.CSS3选择器 :read-only和read-write选择器
    :read-only伪类选择器用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了“readonly=’readonly’”

    :read-write选择器刚好与:read-only选择器相反,主要用来指定当元素处于非只读状态时的样式。

    14.CSS3选择器 ::before和::after
    ::before::after这两个主要用来给元素的前面或后面插入内容,这两个常和”content”配合使用,使用的场景最多的就是清除浮动。

    展开全文
  • 什么是CSS3

    2018-08-16 10:42:04
    CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。 1. ...

    CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。

    1. border-radius是向元素添加圆角边框。

    border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 
    border-radius: 5px 4px 3px 2px; /* 半径分别是左上角、右上角、右下角和左下角*/ 

    2. box-shadow是向盒子添加阴影。

    box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

    参数介绍:
    注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

    添加多个阴影:
    以上的语法的介绍,就这么简单,如果添加多个阴影,只需用逗号隔开即可。如:

    .box_shadow{
        box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
    }

    1、阴影模糊半径与阴影扩展半径的区别
    阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

    阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
    2、X轴偏移量和Y轴偏移量值可以设置为负数

    box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

    3.CSS3边框 为边框应用图片 border-image
    顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。例如:

    border-image:url(xx.jpg) 10px 20px no-repeat;

    4.CSS3颜色 渐变色彩
    线性渐变:
    这里写图片描述
    参数:
    第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:
    这里写图片描述
    第一个参数省略时,默认为“180deg”,等同于“to bottom”。
    第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。

    background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

    效果图:
    这里写图片描述

    5.CSS3文字与字体 text-overflow 与 word-wrap
    text-overflow用来设置是否使用一个省略标记(…)标示对象内文本的溢出。
    语法:
    这里写图片描述
    但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下:

    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 

    同时,word-wrap也可以用来设置文本行为,当前行超过指定容器的边界时是否断开转行。
    语法:
    这里写图片描述
    normal为浏览器默认值,break-word设置在长单词或 URL地址内部进行换行,此属性不常用,用浏览器默认值即可。

    6.CSS3文字与字体 嵌入字体@font-face
    @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。
    语法:

    @font-face {
        font-family : 字体名称;
        src : 字体文件在服务器上的相对或绝对路径;
    }

    这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。
    比如:

    p {
        font-size :12px;
        font-family : "My Font";
        /*必须项,设置@font-face中font-family同样的值*/
    }

    7.CSS3文字与字体 文本阴影text-shadow
    text-shadow可以用来设置文本的阴影效果。
    语法:

    text-shadow: X-Offset Y-Offset blur color;

    X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;

    Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;

    Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;

    Color:是指阴影的颜色,其可以使用rgba色。

    比如,我们可以用下面代码实现设置阴影效果。

    text-shadow: 0 1px 1px #fff;

    8.CSS3背景 background-origin
    设置元素背景图片的原始起始位置。
    语法:

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

    参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。
    需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。

    9.CSS3背景 background-clip
    用来将背景图片做适当的裁剪以适应实际需要。
    语法:

    background-clip : border-box | padding-box | content-box | no-clip

    参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

    10.CSS3背景 background-size
    设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。

    语法:

    background-size: auto | <长度值> | <百分比> | cover | contain

    取值说明:

    1、auto:默认值,不改变背景图片的原始高度和宽度;

    2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;

    3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;

    4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;

    5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。

    提示:大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。

    11.CSS3背景 multiple backgrounds
    多重背景,也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加,缩写时为用逗号隔开的每组值;用分解写法时,如果有多个背景图片,而其他属性只有一个(例如background-repeat只有一个),表明所有背景图片应用该属性值。

    语法缩写如下:

    background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

    可以把上面的缩写拆解成以下形式:

    background-image:url1,url2,…,urlN;

    background-repeat : repeat1,repeat2,...,repeatN;
    backround-position : position1,position2,...,positionN;
    background-size : size1,size2,...,sizeN;
    background-attachment : attachment1,attachment2,...,attachmentN;
    background-clip : clip1,clip2,...,clipN;
    background-origin : origin1,origin2,...,originN;
    background-color : color;

    注意:

    用逗号隔开每组 background 的缩写值;
    如果有 size 值,需要紧跟 position 并且用 “/” 隔开;
    如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。
    background-color 只能设置一个。

    展开全文
  • CSS3有哪些新特性?

    万次阅读 2019-01-04 09:07:39
    所以你主要讲一下在项目中经常用到的Css3的属性就可以,以第一人称来回答这个问题,例如:在我们的项目中经常用CSS3中的XX属性来实现XX特效。 题目解析 在项目开发中我们采用的CSS3新特性有 1.CSS3的选择器 1)E:...
  • css3新属性介绍

    千次阅读 2018-10-03 23:00:50
    CSS3 css3新增的属性大多数要添加前缀以达兼容。 浏览器前缀 浏览器 -webkit- Google Chrome, Safari, Android Browser -moz- Firefox -o- Opera -ms- Internet Explorer, Edge -khtml- Konqueror ...
  • CSS3简介

    千次阅读 2018-05-13 11:29:49
    文章介绍:介绍CSS3是什么以及它能够为Web页面做什么,还会介绍如何使用javascript有效地控制CSS3的功能1,特定厂商的属性和前缀 CSS厂商前缀是浏览器公司在新的或实验性的CSS3功能成为正式的CSS3规范之前,或者在一...
  • CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理 一.旋转 rotate 用法:transform: rotate(45deg); 共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数...
  • CSS3实现32种基本图形

    万次阅读 多人点赞 2016-04-29 10:50:49
    CSS3实现32种基本图形  css3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用css3画出这些图形,要比贴图节省带宽,是一种非常好的网页美观方式。  这32种图形分别为圆形,椭圆形,三角形,倒三角形...
  • 在使用display将元素设置为行内元素的同时(例如:inline、inline-block等),将margin全部设置为0,padding全部设置为0的时候,我发现了元素之间居然还存在着间隙!!!???如下图所示: 不知道哪里冒出来的这个...
  • 什么是CSS3CSS3能做什么?

    千次阅读 2018-11-23 10:20:41
    CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1 的基础上增加了很多强大的新功能,目前主浏览器 Chorme、Safari、Firefox、Opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。在编写CSS3...
  • Css转Sass、Css转Less在线工具

    万次阅读 2016-06-25 14:49:54
    1、Css在线转为Sass/Scss :站点:CSS 2 SASS/SCSS CONVERTER2、Css在线转为Less :站点-1: CSS 2 LESS下面随带推荐一个Less转css的在线工具,站点地址是: LESS 2 CSS 站点-2:FISHSTICSS站点-3CSS2LESS.NET站点-...
  • 使用CSS实现间隔线|(竖线)

    万次阅读 2016-10-15 18:09:50
    方法一:
  • CSS overflow禁止滚动页面

    万次阅读 2018-06-29 13:26:40
    $('body').css('overflow','hidden');//禁止滚动
  • css 强制不换行

    万次阅读 2019-03-11 22:41:10
    css中强制不换行,文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。 white-space:nowrap;
  • 在我们创建的vue项目中,为了使页面更加简洁,我们通常把公共的css和单个组件的css写道外面单个引入。 文件目录如下 加公共的css ①在main.js中加入@import '../static/css/reset.css'(main.js 是我们的...
  • CSS实现图片放大缩小的几种方法

    万次阅读 2016-07-26 22:46:12
    CSS实现图片方法缩小
  • CSS3可以设置边框是向内还是向外, 如果要设置为内边框使用 1 box-sizing: border-box; 外边框 1 box-sizing: content-box;
1 2 3 4 5 ... 20
收藏数 1,566,709
精华内容 626,683
关键字:

css3