问题
I'm using border-left: groove
on an element but I want the border to "fade" into the background as it's about to end at the bottom.
I hope I'm making sense. How would I achieve something to that effect?
回答1:
You can specify gradients for colours in certain circumstances in CSS3, and of course borders can be set to a colour, so you should be able to use a gradient as a border colour. This would include the option of specifying a transparent colour, which means you should be able to achieve the effect you're after.
However, I've never seen it used, and I don't know how well supported it is by current browsers. You'll certainly need to accept that at least some of your users won't be able to see it.
A quick google turned up these two pages which should help you on your way:
- CSS3 Gradient Borders
- http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders
Hope that helps.
回答2:
You could also use box-shadow
property with higher value of blur and rgba()
color to set opacity level.
Sounds like a better choice in your case.
box-shadow: 0 30px 40px rgba(0,0,0,.1);
回答3:
Add this class
css
to your style sheet
.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}
set width
to the width
of your image. and use this html
for image
<div class="border_gradient">
<img src="image.png" />
</div>
though it may not give the same exact border, it will some gradient looks on the border.
source: CSS3 Borders
回答4:
How to fade borders with CSS:
<div style="border-style:solid;border-image:linear-gradient(red, transparent) 1;border-bottom:0;">Text</div>
Please excuse the inline styles for the sake of demonstration. The 1 property for the border-image is border-image-slice, and in this case defines the border as a single continuous region.
Source: Gradient Borders
来源:https://stackoverflow.com/questions/4520943/fade-borders-in-css