เป็นคำถามที่ได้ยินบ่อยมาก: เป็นไปได้ไหมที่จะสร้างเงาจากการไล่ระดับสีแทนสีทึบ? ไม่มีคุณสมบัติเฉพาะของ CSS ที่ทำสิ่งนี้ (เชื่อฉันเถอะ ฉันเคยดูมาแล้ว) และบล็อกโพสต์ใดๆ ที่คุณพบเกี่ยวกับมันนั้นเป็นกลเม็ด CSS มากมายในการประมาณการไล่ระดับสี เราจะครอบคลุมบางส่วนที่เราไป
แต่แรก… อื่น บทความเกี่ยวกับเงาไล่ระดับ? จริงหรือ
ใช่ นี่เป็นอีกโพสต์หนึ่งในหัวข้อนี้ แต่มันแตกต่างออกไป เราจะร่วมกันผลักดันขีดจำกัดเพื่อให้ได้โซลูชันที่ครอบคลุมสิ่งที่ฉันไม่เคยพบที่ไหนมาก่อน: ความโปร่งใส. เทคนิคส่วนใหญ่ใช้ได้ผลหากองค์ประกอบมีพื้นหลังไม่โปร่งใส แต่ถ้าเรามีพื้นหลังโปร่งใสล่ะ เราจะสำรวจกรณีนี้ที่นี่!
ก่อนที่เราจะเริ่ม ให้ฉันแนะนำตัว เครื่องกำเนิดเงาไล่ระดับสีของฉัน. สิ่งที่คุณต้องทำคือปรับการกำหนดค่าและรับรหัส แต่ทำตามเพราะฉันจะช่วยให้คุณเข้าใจตรรกะทั้งหมดที่อยู่เบื้องหลังรหัสที่สร้างขึ้น
สารบัญ
โซลูชันที่ไม่โปร่งใส
เริ่มจากวิธีแก้ปัญหาที่ได้ผลกับ 80% ของกรณีส่วนใหญ่ กรณีที่พบบ่อยที่สุด: คุณกำลังใช้องค์ประกอบที่มีพื้นหลัง และคุณต้องเพิ่มเงาแบบไล่ระดับสีลงไป ไม่มีปัญหาความโปร่งใสที่ต้องพิจารณา
วิธีแก้ไขคือการพึ่งพาองค์ประกอบเทียมที่มีการกำหนดการไล่ระดับสี คุณวางไว้หลังองค์ประกอบจริงและ ใช้ฟิลเตอร์เบลอกับมัน.
.box { position: relative;
}
.box::before { content: ""; position: absolute; inset: -5px; /* control the spread */ transform: translate(10px, 8px); /* control the offsets */ z-index: -1; /* place the element behind */ background: /* your gradient here */; filter: blur(10px); /* control the blur */
}
ดูเหมือนรหัสจำนวนมาก และนั่นเป็นเพราะมันเป็นเช่นนั้น นี่คือวิธีที่เราสามารถทำได้ด้วย a box-shadow
ถ้าเราใช้สีทึบแทนการไล่ระดับสี
box-shadow: 10px 8px 10px 5px orange;
ซึ่งจะทำให้คุณทราบดีว่าค่าต่างๆ ในตัวอย่างข้อมูลแรกกำลังทำอะไรอยู่ เรามีออฟเซ็ต X และ Y รัศมีการเบลอ และระยะการแพร่กระจาย โปรดทราบว่าเราต้องการค่าลบสำหรับระยะสเปรดที่มาจาก inset
คุณสมบัติ
นี่คือตัวอย่างที่แสดงเงาไล่ระดับถัดจากแบบคลาสสิก box-shadow
:
หากมองใกล้ๆ จะสังเกตเห็นว่าเงาทั้งสองมีความแตกต่างกันเล็กน้อย โดยเฉพาะส่วนที่เบลอ ไม่แปลกใจเพราะฉันค่อนข้างมั่นใจว่า filter
อัลกอริทึมของคุณสมบัติทำงานแตกต่างจากของ box-shadow
. นั่นไม่ใช่เรื่องใหญ่เพราะในท้ายที่สุดแล้วผลลัพธ์ก็ค่อนข้างคล้ายกัน
วิธีแก้ปัญหานี้ดี แต่ก็ยังมีข้อเสียเล็กน้อยเกี่ยวกับ z-index: -1
ประกาศ. ใช่มี “บริบทการซ้อน” เกิดขึ้นที่นั่น!
ฉันสมัคร transform
ถึงองค์ประกอบหลักแล้ว บูม! เงาจะไม่อยู่ใต้องค์ประกอบอีกต่อไป นี่ไม่ใช่ข้อผิดพลาด แต่เป็นผลลัพธ์เชิงตรรกะของบริบทการสแต็ก ไม่ต้องกังวล ฉันจะไม่เริ่มคำอธิบายที่น่าเบื่อเกี่ยวกับการซ้อนบริบท (ฉันทำไปแล้วในเธรด Stack Overflow) แต่ฉันจะแสดงวิธีแก้ไขให้คุณดู
วิธีแรกที่ผมแนะนำคือการใช้ 3D transform
:
.box { position: relative; transform-style: preserve-3d;
}
.box::before { content: ""; position: absolute; inset: -5px; transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */ background: /* .. */; filter: blur(10px);
}
แทนที่จะใช้ z-index: -1
เราจะใช้การแปลเชิงลบตามแกน Z เราจะใส่ทุกอย่างเข้าไปข้างใน translate3d()
. อย่าลืมนำไปใช้ transform-style: preserve-3d
ในองค์ประกอบหลัก มิฉะนั้น 3D transform
จะไม่มีผล
เท่าที่ฉันรู้ วิธีแก้ปัญหานี้ไม่มีผลข้างเคียง… แต่บางทีคุณอาจเห็นสิ่งนี้ หากเป็นกรณีนี้ ให้แชร์ในส่วนความคิดเห็น แล้วลองหาวิธีแก้ปัญหากัน!
หากคุณไม่สามารถใช้ 3D ได้ด้วยเหตุผลบางประการ transform
อีกวิธีหนึ่งคือการพึ่งพาสององค์ประกอบหลอก - ::before
และ ::after
. อันหนึ่งสร้างเงาไล่ระดับ ส่วนอีกอันสร้างพื้นหลังหลัก (และสไตล์อื่น ๆ ที่คุณอาจต้องการ) ด้วยวิธีนี้ เราสามารถควบคุมลำดับการซ้อนขององค์ประกอบเสมือนทั้งสองได้อย่างง่ายดาย
.box { position: relative; z-index: 0; /* We force a stacking context */
}
/* Creates the shadow */
.box::before { content: ""; position: absolute; z-index: -2; inset: -5px; transform: translate(10px, 8px); background: /* .. */; filter: blur(10px);
}
/* Reproduces the main element styles */
.box::after { content: """; position: absolute; z-index: -1; inset: 0; /* Inherit all the decorations defined on the main element */ background: inherit; border: inherit; box-shadow: inherit;
}
เป็นสิ่งสำคัญที่จะต้องทราบว่าเราเป็น พระเดช องค์ประกอบหลักในการสร้างบริบทการซ้อนโดยการประกาศ z-index: 0
,หรือ ทรัพย์สินอื่นใดที่ทำเช่นเดียวกันบนมัน นอกจากนี้ อย่าลืมว่าองค์ประกอบหลอกพิจารณากล่องช่องว่างภายในขององค์ประกอบหลักเป็นข้อมูลอ้างอิง ดังนั้น หากองค์ประกอบหลักมีเส้นขอบ คุณต้องคำนึงถึงสิ่งนั้นเมื่อกำหนดสไตล์องค์ประกอบเทียม คุณจะสังเกตเห็นว่าฉันใช้ inset: -2px
on ::after
บัญชีสำหรับเส้นขอบที่กำหนดไว้ในองค์ประกอบหลัก
อย่างที่ฉันบอกไป โซลูชันนี้น่าจะดีพอในกรณีส่วนใหญ่ที่คุณต้องการเงาแบบไล่ระดับ ตราบใดที่คุณไม่จำเป็นต้องรองรับความโปร่งใส แต่เรามาที่นี่เพื่อท้าทายและผลักดันขีดจำกัด ดังนั้นแม้ว่าคุณจะไม่ต้องการสิ่งที่กำลังจะตามมา โปรดอยู่กับฉัน คุณอาจจะได้เรียนรู้เทคนิค CSS ใหม่ๆ ที่คุณสามารถใช้ที่อื่นได้
โซลูชันที่โปร่งใส
มาต่อจากจุดที่เราค้างไว้บน 3D transform
และลบพื้นหลังออกจากองค์ประกอบหลัก ฉันจะเริ่มต้นด้วยเงาที่มีทั้งการชดเชยและระยะการแพร่กระจายเท่ากับ 0
.
แนวคิดคือการหาวิธีตัดหรือซ่อนทุกอย่างภายในพื้นที่ขององค์ประกอบ (ภายในเส้นขอบสีเขียว) ในขณะที่รักษาสิ่งที่อยู่ภายนอก เรากำลังจะใช้ clip-path
สำหรับการที่. แต่คุณอาจสงสัยว่า clip-path
สามารถสั่งตัดได้ ภายใน องค์ประกอบ
อันที่จริง ไม่มีทางที่จะทำเช่นนั้นได้ แต่เราสามารถจำลองได้โดยใช้รูปแบบโพลิกอนเฉพาะ:
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0)
ธาดา! เรามีเงาไล่ระดับที่รองรับความโปร่งใส ทั้งหมดที่เราทำคือเพิ่ม clip-path
ไปที่รหัสก่อนหน้า นี่คือรูปที่แสดงส่วนของรูปหลายเหลี่ยม
พื้นที่สีน้ำเงินคือส่วนที่มองเห็นได้หลังจากทา clip-path
. ผมแค่ใช้สีฟ้าเพื่อแสดงแนวคิดเท่านั้น แต่จริงๆ แล้วเราจะเห็นแค่เงาในบริเวณนั้น อย่างที่คุณเห็น เรามีสี่จุดที่กำหนดด้วยค่าขนาดใหญ่ (B
). ค่าที่ยิ่งใหญ่ของฉันคือ 100vmax
แต่อาจเป็นมูลค่ามหาศาลที่คุณต้องการก็ได้ แนวคิดคือเพื่อให้แน่ใจว่าเรามีพื้นที่เพียงพอสำหรับเงา เรายังมีสี่จุดที่เป็นมุมขององค์ประกอบหลอก
ลูกศรแสดงเส้นทางที่กำหนดรูปหลายเหลี่ยม เราเริ่มจาก (-B, -B)
จนกว่าเราจะไปถึง (0,0)
. โดยรวมแล้วเราต้องการ 10 คะแนน ไม่ใช่ XNUMX จุด เนื่องจากจุดสองจุดถูกทำซ้ำสองครั้งในเส้นทาง ((-B,-B)
และ (0,0)
).
ยังมีอยู่นะ อีกหนึ่งสิ่ง เหลือไว้ให้เราทำ และจะคำนึงถึงระยะสเปรดและค่าชดเชยด้วย เหตุผลเดียวที่การสาธิตด้านบนใช้งานได้เนื่องจากเป็นกรณีเฉพาะที่ระยะออฟเซ็ตและสเปรดเท่ากัน 0
.
มากำหนดการแพร่กระจายและดูว่าเกิดอะไรขึ้น จำไว้ว่าเราใช้ inset
ด้วยค่าลบที่จะทำสิ่งนี้:
ตอนนี้องค์ประกอบเทียมมีขนาดใหญ่กว่าองค์ประกอบหลัก ดังนั้น clip-path
ตัดได้มากกว่าที่เราต้องการ จำไว้ว่าเราต้องตัดส่วนนั้นออกเสมอ ภายใน องค์ประกอบหลัก (พื้นที่ภายในขอบสีเขียวของตัวอย่าง) เราต้องปรับตำแหน่งของจุดทั้งสี่ด้านในของ clip-path
.
.box { --s: 10px; /* the spread */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(0px + var(--s)) );
}
เราได้กำหนดตัวแปร CSS --s
สำหรับระยะการแพร่กระจายและอัปเดตจุดรูปหลายเหลี่ยม ฉันไม่ได้สัมผัสจุดที่ฉันใช้มูลค่ามาก ฉันอัปเดตเฉพาะจุดที่กำหนดมุมขององค์ประกอบหลอก ฉันเพิ่มค่าศูนย์ทั้งหมดด้วย --s
และลด 100%
ค่าโดย --s
.
มันเป็นตรรกะเดียวกันกับการชดเชย เมื่อเราแปลองค์ประกอบเทียม เงาจะไม่อยู่ในแนวเดียวกัน และเราจำเป็นต้องแก้ไขรูปหลายเหลี่ยมอีกครั้งและย้ายจุดไปในทิศทางตรงกันข้าม
.box { --s: 10px; /* the spread */ --x: 10px; /* X offset */ --y: 8px; /* Y offset */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); transform: translate3d(var(--x), var(--y), -1px); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)) );
}
มีตัวแปรอีกสองตัวแปรสำหรับการชดเชย: --x
และ --y
. เราใช้มันภายใน transform
และเรายังอัพเดท clip-path
ค่า เรายังคงไม่แตะจุดรูปหลายเหลี่ยมด้วยค่าที่มาก แต่เราชดเชยจุดอื่นๆ ทั้งหมด — เราลดขนาดลง --x
จากพิกัด X และ --y
จากพิกัด Y
ตอนนี้สิ่งที่เราต้องทำคืออัปเดตตัวแปรสองสามตัวเพื่อควบคุมเงาไล่ระดับสี และในขณะที่เรากำลังทำอยู่ เรามาทำให้รัศมีการเบลอเป็นตัวแปรด้วยเช่นกัน:
เรายังต้องการ 3D หรือไม่
transform
เล่ห์เหลี่ยม?
ทุกอย่างขึ้นอยู่กับชายแดน อย่าลืมว่าการอ้างอิงสำหรับองค์ประกอบหลอกคือช่องว่างภายใน ดังนั้นหากคุณใช้เส้นขอบกับองค์ประกอบหลัก คุณจะมีความเหลื่อมกัน คุณเก็บ 3D ไว้ transform
เคล็ดลับหรือการปรับปรุง inset
มูลค่าบัญชีสำหรับชายแดน
นี่คือตัวอย่างก่อนหน้าพร้อมการอัปเดต inset
มูลค่าแทนที่ 3D transform
:
ฉันจะบอกว่านี่เป็นวิธีที่เหมาะสมกว่า เพราะระยะการแพร่กระจายจะแม่นยำกว่า เนื่องจากเริ่มจาก border-box แทนที่จะเป็น padding-box แต่คุณจะต้องปรับ inset
ค่าตามขอบขององค์ประกอบหลัก บางครั้ง ไม่ทราบเส้นขอบขององค์ประกอบ และคุณต้องใช้โซลูชันก่อนหน้า
ด้วยวิธีแก้ปัญหาที่ไม่โปร่งใสก่อนหน้านี้ เป็นไปได้ว่าคุณจะประสบปัญหาบริบทแบบซ้อน และด้วยวิธีการแก้ปัญหาที่โปร่งใส เป็นไปได้ว่าคุณอาจประสบปัญหาด้านพรมแดนแทน ตอนนี้คุณมีตัวเลือกและวิธีแก้ปัญหาเหล่านั้นแล้ว เคล็ดลับการแปลงร่าง 3 มิติเป็นวิธีแก้ปัญหาที่ฉันโปรดปรานเพราะสามารถแก้ไขปัญหาทั้งหมดได้ (เครื่องกำเนิดไฟฟ้าออนไลน์ จะพิจารณาด้วย)
การเพิ่มรัศมีของเส้นขอบ
หากคุณลองเพิ่ม border-radius
สำหรับองค์ประกอบเมื่อใช้โซลูชันที่ไม่โปร่งใสที่เราเริ่มต้น เป็นงานที่ค่อนข้างเล็กน้อย สิ่งที่คุณต้องทำคือรับค่าเดียวกันจากองค์ประกอบหลัก เท่านี้ก็เสร็จแล้ว
แม้ว่าคุณจะไม่มีรัศมีของเส้นขอบ คุณควรกำหนด border-radius: inherit
. นั่นแสดงถึงศักยภาพใด ๆ border-radius
คุณอาจต้องการเพิ่มในภายหลังหรือรัศมีเส้นขอบที่มาจากที่อื่น
มันเป็นเรื่องที่แตกต่างเมื่อจัดการกับโซลูชันที่โปร่งใส น่าเสียดายที่มันหมายถึงการหาทางออกอื่นเพราะ clip-path
ไม่สามารถจัดการกับความโค้งได้ นั่นหมายความว่าเราจะไม่สามารถตัดพื้นที่ภายในองค์ประกอบหลักได้
เราจะมาแนะนำ mask
คุณสมบัติในการผสม
ส่วนนี้น่าเบื่อมาก และฉันพยายามหาวิธีแก้ปัญหาทั่วไปที่ไม่ต้องพึ่งพา ตัวเลขมหัศจรรย์. ฉันลงเอยด้วยโซลูชันที่ซับซ้อนมากซึ่งใช้องค์ประกอบเทียมเพียงองค์ประกอบเดียว แต่โค้ดเป็นเส้นสปาเก็ตตี้ก้อนหนึ่งที่ครอบคลุมเฉพาะบางกรณีเท่านั้น ฉันไม่คิดว่ามันคุ้มค่าที่จะสำรวจเส้นทางนั้น
ฉันตัดสินใจที่จะแทรกองค์ประกอบพิเศษเพื่อประโยชน์ของรหัสที่ง่ายขึ้น นี่คือมาร์กอัป:
<div class="box"> <sh></sh>
</div>
ฉันกำลังใช้องค์ประกอบที่กำหนดเอง <sh>
เพื่อหลีกเลี่ยงความขัดแย้งที่อาจเกิดขึ้นกับ CSS ภายนอก ฉันสามารถใช้ <div>
แต่เนื่องจากเป็นองค์ประกอบทั่วไป กฎ CSS อื่นที่มาจากที่อื่นสามารถทำลายโค้ดของเราได้โดยง่าย
ขั้นตอนแรกคือการวางตำแหน่ง <sh>
องค์ประกอบและสร้างล้นโดยเจตนา:
.box { --r: 50px; position: relative; border-radius: var(--r);
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
รหัสอาจดูแปลก ๆ เล็กน้อย แต่เราจะเข้าใจถึงตรรกะที่อยู่เบื้องหลังเมื่อเราดำเนินการ ต่อไป เราสร้างเงาไล่ระดับโดยใช้องค์ประกอบหลอกของ <sh>
.
.box { --r: 50px; position: relative; border-radius: var(--r); transform-style: preserve-3d;
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r)); transform: translateZ(-1px)
}
.box sh::before { content: ""; position: absolute; inset: -5px; border-radius: var(--r); background: /* Your gradient */; filter: blur(10px); transform: translate(10px,8px);
}
อย่างที่คุณเห็น องค์ประกอบเทียมใช้รหัสเดียวกันกับตัวอย่างก่อนหน้านี้ทั้งหมด ความแตกต่างเพียงอย่างเดียวคือ 3D transform
กำหนดไว้ที่ <sh>
องค์ประกอบแทนองค์ประกอบหลอก ในขณะนี้ เรามีเงาแบบไล่ระดับโดยไม่มีคุณสมบัติความโปร่งใส:
โปรดทราบว่าพื้นที่ของ <sh>
องค์ประกอบถูกกำหนดด้วยโครงร่างสีดำ ทำไมฉันถึงทำเช่นนี้? ด้วยวิธีนี้ฉันจึงสามารถสมัครก mask
ไว้เพื่อซ่อนส่วนที่อยู่ภายในพื้นที่สีเขียวและเก็บส่วนน้ำล้นที่เราต้องการให้เห็นเงา
ฉันรู้ว่ามันค่อนข้างยุ่งยาก แต่ก็ไม่เหมือน clip-path
ที่ mask
ทรัพย์สินไม่ได้คำนึงถึงพื้นที่ ด้านนอก องค์ประกอบในการแสดงและซ่อนสิ่งต่างๆ นั่นเป็นเหตุผลที่ฉันต้องแนะนำองค์ประกอบพิเศษ - เพื่อจำลองพื้นที่ "ภายนอก"
นอกจากนี้ โปรดทราบว่าฉันใช้ชุดค่าผสมของ border
และ inset
เพื่อกำหนดพื้นที่นั้นๆ สิ่งนี้ทำให้ฉันสามารถเก็บช่องว่างภายในขององค์ประกอบพิเศษนั้นเหมือนกับองค์ประกอบหลัก เพื่อที่องค์ประกอบเทียมจะไม่ต้องการการคำนวณเพิ่มเติม
สิ่งที่มีประโยชน์อีกประการหนึ่งที่เราได้รับจากการใช้องค์ประกอบพิเศษคือองค์ประกอบนั้นคงที่ และมีเพียงองค์ประกอบเทียมเท่านั้นที่เคลื่อนไหว (โดยใช้ translate
). สิ่งนี้จะช่วยให้ฉันกำหนดหน้ากากได้อย่างง่ายดายซึ่งก็คือ ล่าสุด ขั้นตอนของเคล็ดลับนี้
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
มันจบแล้ว! เรามีเงาไล่ระดับของเรา และรองรับ border-radius
! คุณอาจคาดว่าจะมีความซับซ้อน mask
คุ้มค่ากับการไล่ระดับสีมากมาย แต่เปล่าเลย! เราต้องการเพียงสองการไล่ระดับสีง่ายๆ และ a mask-composite
เพื่อร่ายมนตร์ให้สมบูรณ์
มาแยกกันเถอะ <sh>
องค์ประกอบที่จะเข้าใจสิ่งที่เกิดขึ้นที่นั่น:
.box sh { position: absolute; inset: -150px; border: 150px solid red; background: lightblue; border-radius: calc(150px + var(--r));
}
นี่คือสิ่งที่เราได้รับ:
สังเกตว่ารัศมีภายในตรงกับองค์ประกอบหลักอย่างไร border-radius
. ฉันได้กำหนดเส้นขอบขนาดใหญ่ (150px
) และ border-radius
เท่ากับขอบใหญ่ บวก รัศมีขององค์ประกอบหลัก ข้างนอก ฉันมีรัศมีเท่ากับ 150px + R
. ข้างในฉันมี 150px + R - 150px = R
.
เราต้องซ่อนส่วนด้านใน (สีน้ำเงิน) และตรวจสอบให้แน่ใจว่ายังคงมองเห็นส่วนเส้นขอบ (สีแดง) ในการทำเช่นนั้น ฉันได้กำหนดเลเยอร์มาสก์ไว้ XNUMX เลเยอร์ — เลเยอร์หนึ่งที่ครอบคลุมเฉพาะพื้นที่กล่องเนื้อหาและอีกเลเยอร์หนึ่งที่ครอบคลุมพื้นที่กล่องชายแดน (ค่าเริ่มต้น) จากนั้นฉันก็แยกออกจากกันเพื่อเปิดเผยเส้นขอบ
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
ฉันใช้เทคนิคเดียวกันเพื่อ สร้างเส้นขอบที่รองรับการไล่ระดับสีและ border-radius
. Ana Tudor ยังมีบทความดีๆ เกี่ยวกับการกำบังคอมโพสิต ที่ฉันเชิญคุณอ่าน
วิธีการนี้มีข้อเสียหรือไม่?
ใช่ มันไม่สมบูรณ์แบบอย่างแน่นอน ปัญหาแรกที่คุณอาจพบเกี่ยวข้องกับการใช้เส้นขอบบนองค์ประกอบหลัก ซึ่งอาจทำให้เกิดการเยื้องศูนย์เล็กน้อยในรัศมี หากคุณไม่คำนึงถึงเรื่องนี้ เรามีปัญหานี้ในตัวอย่างของเรา แต่บางทีคุณอาจสังเกตเห็นได้ยาก
การแก้ไขทำได้ค่อนข้างง่าย: เพิ่มความกว้างของเส้นขอบสำหรับ <sh>
องค์ประกอบ inset
.
.box { --r: 50px; border-radius: var(--r); border: 2px solid;
}
.box sh { position: absolute; inset: -152px; /* 150px + 2px */ border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
ข้อเสียเปรียบอีกประการหนึ่งคือมูลค่ามหาศาลที่เราใช้สำหรับเส้นขอบ (150px
ในตัวอย่าง) ค่านี้ควรใหญ่พอที่จะมีเงา แต่ไม่ใหญ่เกินไปเพื่อหลีกเลี่ยงปัญหาโอเวอร์โฟลว์และแถบเลื่อน โชคดีที่ เครื่องกำเนิดไฟฟ้าออนไลน์ จะคำนวณค่าที่เหมาะสมที่สุดโดยพิจารณาจากพารามิเตอร์ทั้งหมด
ข้อเสียข้อสุดท้ายที่ฉันทราบคือเมื่อคุณทำงานกับคอมเพล็กซ์ border-radius
. ตัวอย่างเช่น ถ้าคุณต้องการให้รัศมีที่แตกต่างกันใช้กับแต่ละมุม คุณต้องกำหนดตัวแปรสำหรับแต่ละด้าน ฉันคิดว่าไม่ใช่ข้อเสียจริงๆ แต่อาจทำให้โค้ดของคุณยากขึ้นเล็กน้อยในการบำรุงรักษา
.box { --r-top: 10px; --r-right: 40px; --r-bottom: 30px; --r-left: 20px; border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
.box sh { border-radius: calc(150px + var(--r-top)) calc(150px + var(--r-right)) calc(150px + var(--r-bottom)) calc(150px + var(--r-left));
}
.box sh:before { border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
เครื่องกำเนิดไฟฟ้าออนไลน์ พิจารณาเฉพาะรัศมีที่สม่ำเสมอเพื่อความง่าย แต่ตอนนี้คุณรู้วิธีแก้ไขโค้ดหากคุณต้องการพิจารณาการกำหนดค่ารัศมีที่ซับซ้อน
ตัดขึ้น
เราถึงจุดสิ้นสุดแล้ว! ความมหัศจรรย์เบื้องหลังการไล่ระดับเงาไม่ใช่เรื่องลึกลับอีกต่อไป ฉันพยายามครอบคลุมความเป็นไปได้ทั้งหมดและปัญหาที่เป็นไปได้ที่คุณอาจเผชิญ ถ้าฉันพลาดอะไรไปหรือคุณพบปัญหาใดๆ โปรดรายงานในส่วนความคิดเห็น แล้วฉันจะตรวจสอบให้
อีกครั้ง สิ่งเหล่านี้จำนวนมากอาจเกินความจำเป็นเมื่อพิจารณาว่าโซลูชันโดยพฤตินัยจะครอบคลุมกรณีการใช้งานส่วนใหญ่ของคุณ อย่างไรก็ตาม เป็นเรื่องดีที่จะรู้ว่า "ทำไม" และ "อย่างไร" ที่อยู่เบื้องหลังเคล็ดลับนี้ และวิธีเอาชนะข้อจำกัดของมัน นอกจากนี้เรายังได้ออกกำลังกายที่ดีด้วยการเล่น CSS clipping and masking
และแน่นอนคุณมี เครื่องกำเนิดไฟฟ้าออนไลน์ คุณสามารถเข้าถึงได้ทุกเมื่อที่คุณต้องการหลีกเลี่ยงความยุ่งยาก
- เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
- เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
- ที่มา: https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
- 1
- 10
- 11
- 3d
- 7
- 9
- 98
- a
- สามารถ
- เกี่ยวกับเรา
- เกี่ยวกับมัน
- ข้างบน
- แน่นอน
- ตาม
- ลงชื่อเข้าใช้
- บัญชี
- ถูกต้อง
- จริง
- เพิ่มเติม
- หลังจาก
- ขั้นตอนวิธี
- ทั้งหมด
- ช่วยให้
- แล้ว
- เสมอ
- อานา
- และ
- อื่น
- ทุกแห่ง
- ประยุกต์
- ใช้
- การประยุกต์ใช้
- AREA
- รอบ
- บทความ
- หลีกเลี่ยง
- พื้นหลัง
- เป็นพื้น
- เพราะ
- ก่อน
- หลัง
- เชื่อ
- ด้านล่าง
- ใหญ่
- ที่ใหญ่กว่า
- บิต
- Black
- บล็อก
- สีน้ำเงิน
- เบลอ
- ชายแดน
- เจาะ
- กล่อง
- ทำลาย
- Bug
- คำนวณ
- ไม่ได้
- กรณี
- กรณี
- ท้าทาย
- ตรวจสอบ
- คลาสสิก
- คลิปเส้นทาง
- อย่างใกล้ชิด
- รหัส
- สี
- การผสมผสาน
- มา
- ความเห็น
- ร่วมกัน
- สมบูรณ์
- ซับซ้อน
- แนวคิด
- องค์ประกอบ
- ขัดกัน
- พิจารณา
- พิจารณา
- พิจารณา
- เนื้อหา
- สิ่งแวดล้อม
- ควบคุม
- มุม
- มุม
- ได้
- หลักสูตร
- หน้าปก
- ครอบคลุม
- สร้าง
- สร้าง
- CSS
- เคล็ดลับ CSS
- ประเพณี
- ตัด
- ตัด
- จัดการ
- การซื้อขาย
- ตัดสินใจ
- ลดลง
- ค่าเริ่มต้น
- กำหนด
- กำหนด
- การกำหนด
- อย่างแน่นอน
- ทดลอง
- ขึ้นอยู่กับ
- DID
- ความแตกต่าง
- ต่าง
- ทิศทาง
- ค้นพบ
- ระยะทาง
- ไม่
- การทำ
- Dont
- ข้อเสีย
- แต่ละ
- ก่อน
- อย่างง่ายดาย
- ผล
- ทั้ง
- ที่อื่น ๆ
- พอ
- ทำให้มั่นใจ
- โดยเฉพาะอย่างยิ่ง
- อีเธอร์ (ETH)
- แม้
- ทุกอย่าง
- ตัวอย่าง
- ตัวอย่าง
- การยกเว้น
- การออกกำลังกาย
- ที่คาดหวัง
- คำอธิบาย
- สำรวจ
- สำรวจ
- ภายนอก
- พิเศษ
- ใบหน้า
- อันที่จริง
- อย่างเป็นธรรม
- ที่ชื่นชอบ
- ลักษณะ
- สองสาม
- รูป
- กรอง
- หา
- หา
- ชื่อจริง
- แก้ไขปัญหา
- การแก้ไข
- ปฏิบัติตาม
- บังคับ
- ฟรี
- ราคาเริ่มต้นที่
- General
- สร้าง
- ได้รับ
- ให้
- Go
- ไป
- ดี
- การไล่ระดับสี
- สีเขียว
- ที่เกิดขึ้น
- ช่วย
- โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม
- ซ่อน
- สรุป ความน่าเชื่อถือของ Olymp Trade?
- ทำอย่างไร
- HTML
- HTTPS
- ฉันเป็น
- ความคิด
- สำคัญ
- in
- เพิ่ม
- แทน
- แนะนำ
- เชิญ
- ปัญหา
- ปัญหา
- IT
- เก็บ
- การเก็บรักษา
- ทราบ
- ชื่อสกุล
- ชั้น
- เรียนรู้
- น่าจะ
- ข้อ จำกัด
- ขีด จำกัด
- น้อย
- นาน
- อีกต่อไป
- ดู
- มอง
- LOOKS
- Lot
- มายากล
- หลัก
- เก็บรักษา
- ส่วนใหญ่
- ทำ
- หน้ากาก
- วิธี
- วิธี
- อาจ
- แก้ไข
- ขณะ
- ข้อมูลเพิ่มเติม
- มากที่สุด
- ย้าย
- การย้าย
- Mozilla
- ความลึกลับ
- จำเป็นต้อง
- เชิงลบ
- แต่
- ใหม่
- ถัดไป
- ชดเชย
- ONE
- ออนไลน์
- ตรงข้าม
- ดีที่สุด
- Options
- ส้ม
- ใบสั่ง
- อื่นๆ
- ผลิตภัณฑ์อื่นๆ
- มิฉะนั้น
- เค้าโครง
- ด้านนอก
- เอาชนะ
- พารามิเตอร์
- ส่วนหนึ่ง
- ในสิ่งที่สนใจ
- เส้นทาง
- แบบแผน
- สมบูรณ์
- บางที
- เลือก
- สถานที่
- เพลโต
- เพลโตดาต้าอินเทลลิเจนซ์
- เพลโตดาต้า
- เล่น
- กรุณา
- บวก
- จุด
- รูปหลายเหลี่ยม
- ตำแหน่ง
- ความเป็นไปได้
- เป็นไปได้
- โพสต์
- ที่มีศักยภาพ
- สวย
- ก่อน
- อาจ
- คุณสมบัติ
- ผลัก
- ใส่
- คำถาม
- มาถึง
- ถึง
- อ่าน
- ความจริง
- เหตุผล
- แนะนำ
- สีแดง
- ลด
- ที่เกี่ยวข้อง
- สัมพัทธ์
- วางใจ
- จำ
- เอาออก
- ซ้ำแล้วซ้ำอีก
- รายงาน
- ผล
- เปิดเผย
- เส้นทาง
- กฎ
- กล่าวว่า
- ประโยชน์
- เดียวกัน
- Section
- เงา
- Share
- น่า
- โชว์
- คล้ายคลึงกัน
- ง่าย
- ความง่าย
- ตั้งแต่
- เล็ก
- So
- ของแข็ง
- ทางออก
- บาง
- บางสิ่งบางอย่าง
- บางแห่ง
- ช่องว่าง
- โดยเฉพาะ
- กระจาย
- กอง
- การสุม
- เริ่มต้น
- ข้อความที่เริ่ม
- เริ่มต้น
- เข้าพัก
- ขั้นตอน
- ยังคง
- เรื่องราว
- เหมาะสม
- สนับสนุน
- รองรับ
- แปลกใจ
- เอา
- เป้าหมาย
- งาน
- พื้นที่
- พื้นที่
- สิ่ง
- สิ่ง
- คิด
- ไปยัง
- ร่วมกัน
- เกินไป
- หัวข้อ
- รวม
- แตะ
- แปลง
- แปลความ
- การแปลภาษา
- ความโปร่งใส
- โปร่งใส
- เทคนิค
- จริง
- ตามแบบฉบับ
- เข้าใจ
- บันทึก
- ให้กับคุณ
- us
- ใช้
- ความคุ้มค่า
- ความคุ้มค่า
- มองเห็นได้
- วิธี
- อะไร
- ความหมายของ
- ที่
- ในขณะที่
- จะ
- ไม่มี
- งาน
- การทำงาน
- โรงงาน
- คุ้มค่า
- X
- ของคุณ
- ดัชนี z
- ลมทะเล
- เป็นศูนย์