CSS عنصر الدف الخارجي مع مربع الداخلية / الحدود السكتة الدماغية

Question

أحاول محاولة ما يلي.لدي فحم يحتوي على مربع مع ضربة حدودية كبيرة.إليك الرمز الذي كنت ألعب به.

giveacodicetagpre.

وأحصل على هذه النتيجة،

أحاول الوصول إلى هذه النتيجة النهائية،

أعرف أن طرق المربع التي يوفرها CSS، ولكن لا أعرف ما إذا كان بإمكاني تحقيق ذلك باستخدام ذلك.أي أفكار أو أفكار؟

Answer 1

يمكنك استخدام مزيج من مربع الظل الذي لا يستخدم انتشار أو طمس وحدود:

css

giveacodicetagpre.

jsfiddle

Answer 2

ربما نوع الحدود "Ridge" يكفي ...

http://jsfiddle.net/67u9z/1/

giveacodicetagpre.

Answer 3

I know this question is very old, but you can use outline offset: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset

Just change the offset to a negative in order to get it inside the container:

outline-offset: -15px;