条件
1. Position:absolute;
2. 减号两边要有空格
水平居中:left:calc(50%-50px)
垂直居中:top:calc(50%-50px)
div{
width:100px;
height:100px;
border:1pxsolidgray;
position:absolute;
left:calc(50%-50px);
top:calc(50%-50px);
border-radius:10px20px30px40px;
}
与下面代码相等
2.border-radius:10px20px30px;—>右上与左下相等
3.border-radius:10px20px;—>对角相等
4、圆的最大值可以使一个正方形变成一个扇形
eg:border-top-left-radius:100px100px; // 圆的半径等于正方形的边长
外阴景
x轴移动的距离、轴移动的距离、模糊值阴影扩大距离、阴影颜色
内阴影
设置spread值,阴影是以边界外扩展,没有设置就是边界两边扩展
div {
position: absolute;
border-radius: 5px;
left: calc(50% - 50px);
top: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: #fff;
box-shadow: 0px 1px 2px rgba(0, 0, 0, .1);
transition: all.6s;
}
div::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: all.6s;
}
div:hover {
transform: scale(1.25, 1.25);
/*使变大*/
}
div:hover::after {
opacity: 1;
}
使用绝对或相对地址指或者创建渐变色来确定图像。
background:linear-gradient(red,yellow);
{background-image:linear-gradient(left,red100px,yellow200px);}
效果如下图:
那从(100px,100px)到(200px,200px)应该就是从左上角开始,写法如下:
{background-image:linear-gradient(lefttop,red100px,yellow200px);}
效果如下
left,right,top,bottom,lefttop,leftbottom,righttop,right,bottom
分别表示,从左往右,从右往左,从上往下,从下往上,从左上往右下,从……(都懂的,不全写了)
当然,也可以用angle角度来写!
{background-image:linear-gradient(-45deg,red100px,yellow200px);}
具体的样式大家可以尝试着写一下,看一下!很多情况下,用了才知道!
注意:有不少效果加了-webkit前缀以及-moz前缀会展现的不一样!
例如:
background-image:-webkit-linear-gradient(-45deg,red,yellow)
与
background-image:linear-gradient(-45deg,red,yellow)
在Chrome浏览器下的渐变方向居然是相反的!但是45deg是正常的。Firefox浏览器下也是如此,有前缀和没有前缀方向相反!咋回事?
原因很简单,CSS3目前还是草案阶段!
从浏览器去掉前缀前后的变化可以推测,之前,W3C的渐变坐标是与photoshop中一致的,但是,后来,由于某些原因,修改了。
至于什么原因,根据我草草的查找,可能与下面几个关键字之一有联系:animation/transition动画、write-mode书写方向、flexbox模型、以及radial-gradient渐变等。在这里就不深入研究了!
background-image:linear-gradient(top,#fff,#dededc);
//但是为了兼容,有时候要写多个前缀,变成如下:
background-image:-ms-linear-gradient(top,#fff,#dededc);
background-image:-moz-linear-gradient(top,#fff,#dededc);
background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#fff),to(#dededc));
background-image:-webkit-linear-gradient(top,#fff,#dededc);
background-image:-o-linear-gradient(top,#fff,#dededc);
background-image:linear-gradient(top,#fff,#dededc);
指定对象的背景图像向外裁剪的区域。
fixed:背景图像相对于视口(viewport)固定。
scroll:背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local:背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。
区别就是长单词在word-wrap作用下换到下一行,后面可以正常换行,word-break的作用下利用了上一行没有用完的空间。
2、text-shadow:0px0px10px#f00,
0px 0px 20px #f10,
0px 0px 30px #f20,
0px -5px 20px #f10,
0px -10px 20px #f20,
0px -15px 30px #f10,
0px -20px 40px #f20;
下载外部的字体包
二个属性:
font-family:'abc'-->字体名称
src:url();--->引用地址
调用:div{font-family:'abc';}
@font-face{
font-family:'diyfont';
src:url('diyfont.eot');/*IE9+*/
src:url('diyfont.eot?#iefix')format('embedded-opentype'),/*IE6-IE8*/
url('diyfont.woff')format('woff'),/*chrome、firefox*/
url('diyfont.ttf')format('truetype'),/*chrome、firefox、opera、Safari,Android,iOS4.2+*/
url('diyfont.svg#fontname')format('svg');/*iOS4.1-*/
}
normal:默认处理方式。会将序列的空格合并为一个,内部是否换行由换行规则决定。
prez原封不动的保留你输入时的状态,空格、换行都会保留,并且当文字超出边界时不换行。等同pre元素效果
nowrap:与normal值一致,不同的是会强制所有文本在同一行内显示。
pre-wrap:与pre值一致,不同的是文字超出边界时将自动换行。
pre-line:与normal值一致,但是会保留文本输入时的换行。
auto:无特殊对齐方式。
left:内容左对齐。
center:内容居中对齐。
right:内容右对齐。
justify:内容两端对齐。
start:内容对齐开始边界。
end:内容对齐结束边界。
定义块内文本内容的最后一行(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)或者被强制打断的行的对齐方式
指定字符之间的额外间隙。
用长度值指定文本的缩进。可以为负值。
定义块内文本内容的缩进。
行内元素要使用该属性必须先定义该元素为块级或行内块级。
hanging和each-line关键字紧随在缩进数值之后