corner-top-right-shape

æéå¯ç¨

Want more browser support for this feature? Tell us why.

CSS å±æ§ corner-top-right-shape ç¨äºæå®çåå³ä¸è§å¨ border-radius åºååçå½¢ç¶ã

è¯æ³

css

/* å³é®åå¼ */
corner-top-right-shape: scoop;
corner-top-right-shape: square;

/* superellipse() å½æ°å¼ */
corner-top-right-shape: superellipse(2.2);
corner-top-right-shape: superellipse(-2.5);

/* å¨å±å¼ */
corner-top-right-shape: inherit;
corner-top-right-shape: initial;
corner-top-right-shape: revert;
corner-top-right-shape: revert-layer;
corner-top-right-shape: unset;

å¼

corner-top-right-shape å±æ§ä½¿ç¨ <corner-shape-value> å¼è¿è¡æå®ã

å½¢å¼å®ä¹

åå§å¼	`round`
éç¨åç´	ææåç´ . It also applies to `::first-letter`.
æ¯å¦æ¯ç»§æ¿å±æ§	å¦
è®¡ç®å¼	The corresponding superellipse() value.
å¨ç»ç±»å	Animates as per superellipse interpolation.

å½¢å¼è¯æ³

corner-top-right-shape = 
  <corner-shape-value>  

<corner-shape-value> = 
  round             |
  scoop             |
  bevel             |
  notch             |
  square            |
  squircle          |
  <superellipse()>  

<superellipse()> = 
  superellipse( <number>  |
  infinity                |
  -infinity )

ç¤ºä¾

åºç¡ `corner-top-right-shape` ç¨æ³

HTML

æ¤ç¤ºä¾çæ è®°åªåå«åä¸ª <div> åç´ ã

html

<div></div>

CSS

æä»¬ä¸ºè¿ä¸ªçåæä¾äºä¸äºåºç¡æ ·å¼ï¼è¿éä¸ºäºç®æ´å·²çç¥ï¼ï¼å¹¶ä¸åºç¨äº box-shadowã60 åç´ ç border-radiusï¼ä»¥åä¸ä¸ªåå¼ä¸º bevel ç corner-top-right-shapeã

body {
  font-family: Arial, Helvetica, sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

css

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 60px;
  corner-top-right-shape: bevel;
}

ç»æ

æ¸²æç»æå¦ä¸æç¤ºï¼

è§è

è§è
CSS Borders and Box Decorations Module Level 4 # propdef-corner-top-right-shape

æµè§å¨å¼å®¹æ§

åè§

corner-shape ç®åå±æ§
corner-top-left-shapeãcorner-bottom-left-shape å corner-bottom-right-shape
corner-start-start-shapeãcorner-start-end-shapeãcorner-end-start-shape å corner-end-end-shape
border-radius ç®åå±æ§
border-top-right-radius
CSS è¾¹æ¡åçåè£é¥°æ¨¡å
CSS èæ¯åè¾¹æ¡æ¨¡å

å¸®å©æ¹è¿ MDN

äºè§£å¦ä½åä¸è´¡ç®

å¨ GitHub ä¸æ¥çæ¤é¡µé¢ â¢ æ¥åæ¤åå®¹çé®é¢

corner-top-right-shape

HTML

CSS

ç»æ

å¸®å©æ¹è¿ MDN

ç»æ

å¸®å©æ¹è¿ MDN