🌹🌹🌹🖤
هل يمكن جعل ال box-shadow متعدد الالوان ؟
نعم يمكن ذلك بتمريرالأولان تباعاً
أمثلة:
box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.80), 0 -10px 20px -5px #7b272c; أو box-shadow: 0 5px 0 rgba(255, 0, 0, 1), 0 10px 0 rgba(0, 255, 0, 1);
مثال مع تحديد الإتجاهات:
box-shadow: 0px -10px 15px -6px rgba(255,000,000,0.7), /* أعلى - أحمر */ 0px 5px 15px 0px rgba(000,255,000,0.3), /* أسفل*/ 5px 0px 15px 0px rgba(000,000,255,0.3), /* يمين */ -5px 0px 15px 0px rgba(100,100,100,0.3); /* يسار*/
طيب اكدر اخلي اللون الواحد يكون في الزاوية وليس في الضلع ؟
يعني بدل ما يكون في الاسفل واخر في اليمين يكون لون واحد في اسفل اليمين
اتمنى وصلت🌹🖤
حاول إضافة الظل في زاوية معينة جرب المثال التالي حيث نستخدم خاصية shadow spread
HTML:
<div class="my_Div"></div>
CSS:
.my_Div
{
border: 1px solid #333;
width: 50px;
height: 50px;
box-shadow: 10px 0 5px -2px #888;
}
تستطيع الوصول للنتيجة المرغوبة بانشاء عدة ضلال وتحدد تموضعها في المثال في الأسفل أنشأت ضل أحمر على اليمين وضل أزرق على اليسار
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
}
div {
margin-top: 300px;
width: 100px;
height: 100px;
box-shadow: 16px 0px 0px 1px rgba(255, 0, 0, 0.75), -17px 0px 0px 1px rgba(54, 0, 255, 0.75);
}
</style>
</head>
<body>
<div></div>
</body>
<script></script>
</html>
هذه الاداة بامكانها مساعدتك في انشاء الضلال
التعليقات