CSS设置边角凹陷

CSS设置边角凹陷

一. 利用border-radius

border-radius: 20px;

1. 这样虽然可以,但是设置边框的时候需要注意:

   border-right:1px red solid;
   

边框同样也是弯的,

如果想要设置竖线:

 outline:1px red solid;

二. radial-gradient

利用辐射变化来调整

background-image: radial-gradient(circle at right top, #fff 50px, #0a2c8f 50px);

注:

radial-gradient(circle at right top, #fff 50px, #0a2c8f 50px)

第一个值 表示凹陷角为圆, at 所在的位置是right top(右上角),从(#fff) 50px开始 变化,到( #0a2c8f) 50px过渡完成,由于两个位置都是50px ,所以中间不允许有任何的过渡,造成以上形状

8f) 50px过渡完成,由于两个位置都是50px ,所以中间不允许有任何的过渡,造成以上形状