---
id: 587d78a6367417b2b2512add
title: Create a Graphic Using CSS
challengeType: 0
videoUrl: ''
localeTitle: قم بإنشاء رسم باستخدام CSS
---
## Description
من خلال التلاعب بمختصرات وخصائص مختلفة ، يمكنك عمل أشكال مثيرة للاهتمام. واحدة من أسهل في محاولة هو شكل هلال القمر. لهذا التحدي ، تحتاج إلى العمل مع خاصية box-shadow
التي تقوم بتعيين ظل عنصر ، مع خاصية border-radius
التي تتحكم في استدارة زوايا العنصر. سوف تقوم بإنشاء كائن مستدير وشفافة مع ظل هش يعوض قليلاً إلى الجانب - الظل سيكون في الواقع شكل القمر الذي تراه. لإنشاء كائن مستدير ، يجب تعيين الخاصية border-radius
إلى قيمة 50٪. قد تتذكر من تحدي سابق أن خاصية box-shadow
تأخذ قيمًا offset-x
، offset-y
، blur-radius
، و blur-radius
spread-radius
وقيمة اللون بهذا الترتيب. تعد قيم spread-radius
blur-radius
و blur-radius
spread-radius
اختيارية.
## Instructions
التعامل مع عنصر مربع في المحرر لإنشاء شكل القمر. أولاً ، قم بتغيير background-color
إلى شفاف ، ثم قم بتعيين الخاصية border-radius
إلى 50٪ لجعل الشكل الدائري. وأخيرًا ، قم بتغيير الخاصية box-shadow
لتعيين offset-x
إلى 25px ، و offset-y
إلى 10px ، و blur-radius
إلى 0 ، spread-radius
إلى 0 ، و color to blue.
## Tests
```yml
tests:
- text: يجب تعيين قيمة الخاصية background-color
إلى transparent
.
testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the background-color
property should be set to transparent
.");'
- text: يجب تعيين قيمة خاصية border-radius
إلى 50%
.
testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the border-radius
property should be set to 50%
.");'
- text: يجب تعيين قيمة الخاصية box-shadow
إلى 25px للإزاحة offset-x
، و offset-x
بكسل لـ offset-x
offset-y
، و 0 لـ blur-radius
، و 0 لـ spread-radius
، وأخيراً اللون الأزرق للون.
testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi), "The value of the box-shadow
property should be set to 25px for offset-x
, 10px for offset-y
, 0 for blur-radius
, 0 for spread-radius
, and finally blue for the color.");'
```
## Challenge Seed
## Solution
```js
// solution required
```