اعمال نشدن border radius

Question

سلام استاد وقتتون بخیر

ببخشید توی این قطعه کد برای اینکه بتونیم border radius رو اعمال کنیم چیکار میتونیم بکنیم؟

بوردر رو ترنسپرنت در نظر گرفتم که بتونم از گرادیان برای بوردر استفاده کنم ولی خب از اونور border radius اعمال نمیشه

سوالم اینه که حالا اگر تحت همین شرایط یه button با border radius بخایم باید چیکار کنیم ؟

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="style.css">
</head>
<body>
      <button id="gradient-btn-1">Gradient Button 1</button>
</body>
</html>

css


#gradient-btn-1{
   padding: 20px 40px;   
   font-size: 1.4rem;
   box-sizing: border-box;
   background-color: #e7eef1;
   border: solid 8px transparent;
   border-image: linear-gradient(to right,purple,blue);
   border-image-slice: 1;
   color: purple ;
   transition: all 0.3s ease-in-out;
}

#gradient-btn-1:hover{
      background-image: linear-gradient(to right,purple,blue);
      color: #e7eef1;
      cursor: pointer;      
}

طراحی وب

علی قربان زاده

6 تیر 99

Answer 1

حذف شده

سلام روشتون یکم مشکل داره به لینک های زیر مراجعه کنید اونجا کلی نمونه براش وجود داره:

https://css-tricks.com/gradient-borders-in-css/

https://www.hongkiat.com/blog/css-gradient-border/

توسط

مدیر

7 تیر 99

اعمال نشدن border radius

سوالات مرتبط