Home  >  Article  >  Web Front-end  >  Detailed explanation of border instances in css3

Detailed explanation of border instances in css3

零下一度
零下一度Original
2017-06-16 13:46:031610browse

How to remove html img picture borders with CSS

Hello, if you have a lot of webpage pictures, if you want to remove the borders, just write a line of code in css.

<style>
img{border:0;}
</style>

If you want to remove the border of an img picture separately, you can also define it separately. For example

<div class="pic"><img src="图片地址" <a href="www.baidu.com/s?wd=alt&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y1uyN9ujNBn1NWm19Wnyc30ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHTvPWRdP104PWm3nHTYPW0Y" target="_blank" class="baidu-highlight">alt</a>=""></div>
<a href="www.baidu.com/s?wd=css&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y1uyN9ujNBn1NWm19Wnyc30ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnHTvPWRdP104PWm3nHTYPW0Y" target="_blank" class="baidu-highlight">css</a>写:
.pic img{border:0;}

How to make the border have a three-dimensional effect in css

1. It can be achieved with shadow:
box-shadow: 1px 1px 2px #226
But It should be noted that the browser must support css3 to be effective

2. It can also be achieved by setting the border color: border-bottom: solid 1.5px #333;
Note: You can change the bottom to indicate downward, 1.5px Indicates its size, #333 is the color, I set it here to black, you can set what you want. Set right, top, left, and bottom to indicate his direction.

How to add a picture border to the div layer

The sliding door technology is used, that is, several divs are nested, and each layer of divs is given a different background image. Of course, current CSS3 can directly create rounded corners.

css style how to remove the border of the image

Detailed explanation of border instances in css3

img no border css style

img{padding:0; border:0;margin:0;display:block;}

Interception is For example, the border on the picture is 1px

.div{background:url(图片地址) 1px 1px ;width:图片width-2;height:图片height-2;}

The above is the detailed content of Detailed explanation of border instances in css3. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn