day21 html5

day21ナレッジ

1.シャドウ:
テキストシャドウ:テキストシャドウ:x軸の位置y軸の位置シャドウのサイズシャドウの
色注:複数のシャドウを追加する場合は、シャドウの各グループをコンマで区切ります。

盒子阴影:box-shadow:x y 阴影的模糊度 阴影扩散的大小 阴影颜色 内阴影(inset)
添加多阴影:以逗号分隔的形式添加多阴影

文本换行:英文或者数字默认显示:如果没有换行的情况下:尝试把下一个长单词放在下一行显示。
word-wrap:break-word:
功能:尝试把长单词换到下一行显示,如果在下一行仍然有超出的情况下,自动断句。
word-break:break-all;
功能:粗暴的断句。

背景图
background-origin:背景图的起始位置
padding-box;  默认值(padding区域开始)
border-box     边框后面开始
contenr-box    内容区域开始

background-clip:  背景的裁切(只显示哪个区域的背景)
border-box:; 默认值
padding-box:;
contenr-box:;

background-size    控制背景图的大小
属性值:宽度  高度
属性值数值:  px  %
cover       按照背景图比列放大到全部平铺在元素后面则停止
contani     按照比例饿放大,当宽度或者高度,达到容器最高则停止
如果让背景图在不变形的情况下,填满整个内容区:  background-size:cover

多个背景图设置:
background:url()no-respeat,url()no-respeat,

新增一个背景颜色属性:hsla
语法:background:hsla(240,50%,44%,0.5);

图片边框:把一张图片,当作一个边框就行显示。
border-image:;简写形式
border-image-source   用在边框的图片的路径
border-image-slice    图片边框向内偏移(不加单位)。{变图片切割成九宫格}
border-image-repeat   图片边框是否平铺(repeat),铺满(round),或者拉伸(stretch)
border-image-ouset    边框向外偏移

圆角:border-radius:半径!
一个值:四周圆角
两个值:左上角及右下角    右上角及左下角
三个值:左上角   右上角及左下角    右下角
四个值:从左上角开始 顺时针设置。(左上 右上 右下 左下)

分垂直半径和水平半径:
border-radius: 水平半径 / 垂直半径

width新增的属性值:
fill-available     合理分配有效剩余空间
fit-contenr        找子元素内容的宽度,按照子元素的宽度进行设置
max-contenr        找子元素最大的宽度
min-contenr        找子元素最小的宽度

calc计算
列如width:calc(100% - 200px) + - / * 都可以

css3事件  
pointer-events:none;
阻止各种按钮(button\a)的功能。  透遮罩层。
元の記事を21件公開 ・いい ね0 訪問数278

おすすめ

転載: blog.csdn.net/jiatinghui/article/details/105498180