Shulou(Shulou.com)06/01 Report--

This article will explain in detail the example analysis of adding borders in html. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Css is widely used, and there are many ways to use it even in the effects of pictures. Here are five ways to write CSS to add special effects frames to pictures.

Shadow effect

Add a shadow effect by using a background image with some padding.

HTMLCSS

Img.shadow {

Background: url (shadow- 1000×1000.gif) no-repeat right bottom

Padding: 5px 10px 10px 5px

}

Double-sided frame effect

This should be the most common technique at present, and we create speaking borders in the following ways

HTMLCSS

Img.double-border {

Border: 5px solid # ddd

Padding: 5px

Background: # fff

}

Picture frame effect

There is the best explanation on webdesignerwall.com, and this effect is based on the technique of cascading a transparent image on top. As for the PNG transparency of IE6, you can refer to this tutorial.

HTML

CSS

. Frame-block {

Position: relative

Display: block

Height:335px

Width: 575px

}

. Frame-block span {

Background: url (frame.png) no-repeat center top

Height:335px

Width: 575px

Display: block

Position: absolute

}

Watermark effect

You can add a watermark by reducing the transparency of the main picture to make the background image transparent.

HTML

CSS

. Transp-block {

Background: # 000 url (watermark.jpg) no-repeat

Width: 575px

Height: 335px

}

Img.transparent {

Filter:alpha (opacity=75)

Opacity:.75

}

Add caption to the picture

Use absolute positioning and transparency settings to add flexible instructions.

HTML

CSS

. Img-desc {

Position: relative

Display: block

Height:335px

Width: 575px

}

. Img-desc cite {

Background: # 111

Filter:alpha (opacity=55)

Opacity:.55

Color: # fff

Position: absolute

Bottom: 0

Left: 0

Width: 555px

Padding: 10px

Border-top: 1px solid # 999

This is the end of the article on "sample analysis with borders in html". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.