CSS 练习demo-3

141 阅读1分钟

选择按钮

使用到的CSS属性

appearance:none;
改变元素的默认样式为无

-webkit-appearance:none;
移除 造型的默认样式
  
background-size:cover;
长方形图片完美适配正方形容器,缩放图片完全覆盖背景区,图片不被压窄 

background-repeat:no-repeat;
定义背景图片的重复方式,没有重复

box-shadow:inset 0px 0px 2px rgba(255,255,255,7);
描述一个或多个阴影的效果

filter:blur(0px);      
将模糊或颜色偏移等效果   用在背景和边框上

360deg (360°)

button:hover;
鼠标悬浮的时候

calc(100%+10px)
可以计算元素的属性

ranslateX(50%)  
translateY(-50%)
在二维平面上水平(向左向右)移动元素,可以添加负数

bottom100%;right100%;
让一个元素出现在左边或者上面,不一定只写left 和 top

点击预览:练习代码 效果展示