一.css3 新增样式(美学特效)

CSS3概念: 是最新的 CSS 标准。css3 向下兼容css2 ,可以理解成为了满足网页的日渐提升的功能性与设计美学而新增的css样式，利用css3 我们可以通过更少的代码实现更好的表现，很大程度上节省了JavaScript引擎的开销。

二.border-radius 圆角属性

①(一个PX值(最常用)： 四个圆角值相同(4px , 8px ,50%全圆形,最常用))

②(四个PX值(设置宽2高1上侧半圆最常用): heightPX, heightPX,0 ,0; (左上和右上角使用,下侧半圆则 :0 ,0,heightPX, heightPX; )

③同理(设置宽1高2的长方形为左侧半圆): 0, heightPX, heightPX,0; (右上和右下角使用)

④宽1高2的长方形: 50% 50% 0 0 (子弹头)

⑤一个三角形和四个三角形 写法:

一.border-radius 圆角属性概念

这个属性允许你为元素添加

圆角

边框

二.原理:border-radius:length px 其实length就是对应每个角所要截取的宽高,而这个截取的宽高是很有作用的



本质就是平移所置换过去的其中一个,盒子圆角所形成的圆形的半径来的, 因此一个盒子的四个圆角我们分别可以看成四个圆形,不同方向的圆弧.

(PX宽高对应切图,圆弧即圆角可以自己模拟,根据宽高形成)


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rRwE6DKm-1619714976662)(C:\Users\tuyue\AppData\Local\Temp\1613053915699.png)]

(XY对应切图)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0IianHNE-1619714976663)(C:\Users\tuyue\AppData\Local\Temp\1613053857947.png)]

三.border-radius 圆角属性语法:

1.每个半径的四个值的顺序是：


(和方形图一样是顺时针,只是一个是角,一个是线)左上角，右上角，右下角，左下角。

如果省略左下角，右上角是相同的。

如果省略右下角，左上角是相同的。

如果省略右上角，左上角是相同的。

2. 1-4个值所对应(四个值是按顺序的,此外都是对角来的)

• 
  四个值(左右右左):
  
  第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 
  三个值(左上, 右上左下, 右下 ):
  
  第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
• 
  两个值(左上右下,右上左下):
  
  第一个值为左上角与右下角，第二个值为右上角与左下角
• 
  一个值(最常用)：
  
  四个圆角值相同(4px ,8px ,50%最常用)

border-radius: 1-4 length|% / 1-4 length|%;
/* xy合并参数写法 */
border-radius: 10px 20px 30px 40px;
border-radius: top-left top-right bottom-right bottom-left

/* 全参数写法 */
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y

四.复合与单例写法对比

border-radius:2em; (根据默认字体来设置,当前字体为14px,则圆角就为14*2px)

/*对应单例写法为*/

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 2em 1em 4em / 0.5em 3em;

/*对应单例写法为*/

border-top-left-radius