CSS效果
1.使用div绘制图形(三角形)?
2.如何产生一个不占空间的边框?( box-sizing属性)?
[!NOTE]
知识点:IE和标准盒子模型的异同点
标准盒子模型:元素的width或height=content的width或height;
IE盒子模型:元素的width或height=content的width或height+padding2+border2;
2.1 使用box-shadow实现
2.2 使用outline实现
在元素边框边缘的外围绘制一条包围元素的线,包括outline-color、outline-style、outline-width三个子属性的设置,可缺省,无固定顺序。轮廓不占据页面空间,也不一定是矩形。即不会增加额外的width或者height。
3.如何实现IOS图标的圆角?
5.说下背景图的居中显示/重复/改变大小?
6.如何平移/放大一个元素?如何实现0.5px的边框?
[!NOTE]
知识点:transform的灵活使用
7.如何实现3D效果(旋转的硬币)?
/ 1. 设置一个透视变换,相机距离图像的距离 /
/ perspective : 500px /
/ 2. 设置视觉查看的样式 /
/ transform-style : perspective-3d /
/ 3. 变换图像 /
/ transform : translate rotate /
/旋转的硬币效果/
.money {
width: 100px;
height: 100px;
border-radius: 50px;
background-color: #48adff;
border: 2px solid #000;
/*开启3D效果*/
perspective: 500px;
transform-style: preserve-3d;
/*transform : rotateY(180deg);*/
animation : rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform : rotateY(0deg);
}
to {
transform : rotateY(360deg);
}
}