那些年我们学过的css3技巧

2022-12-25 0 456

随著2013年之后,移动互联网的普及化,到那时的2020年,css3早已无须是,高阶#后端开发#师用以撷取的基本功了,早已正式成为各阶层的后端专业人士,要掌控的基本知识,掌控css3是两个符合要求的后端技师必不可少的此基础潜能。

从前须要采用相片同时实现的许多效用,那时采用css3能间接同时实现,提升了效用和新体验,也提升了开发人员对效用的控制潜能。比如说下列两个经典作品:

那些年我们学过的css3技巧

css3同时实现小提琴

那些年我们学过的css3技巧

css3同时实现Sonbhadra

那些年我们学过的css3技巧

css3同时实现Anthracoidea

许多开发人员害怕css3的相容性,提议他们采用时,依照工程项目情形,展开相容性展开调查,比如采用caniuse中文网站。

那些年我们学过的css3技巧

点选相片查阅非主流应用程序的全力支持情形

css3 常见到的两个特性

border-radius 梯形前面板box-shadow 箱子阴霾animation 帧动画transition 过渡动画以及各种新增选择器

接下来,看一下 border-radius的采用情形

border-radius:2em; /*基本采用*/

border-radius: [右上] [右下] [左下]

/*高阶采用能定义各个角的数值*/

单位能为 像素px,em,rem以及 百分比。

比较常见的两个效用:

圆形

那些年我们学过的css3技巧

border-radius:50%;

或者元素为 方形,比如 长宽为100px,border-radius则为50px

border-radius:50px

半圆

那些年我们学过的css3技巧

div {

width: 200px;

height: 100px;

background: red;

border-radius: 100px 100px 0 0;

}

当然也能给相片采用,比如他们常见的圆形头像,如果不采用圆形相片的情形下,采用

border-radius也是能同时实现的,比如微博的头像

那些年我们学过的css3技巧

点选相片查阅大图

感谢他们观看文章,后续更新敬请期待!

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务