css与图片实现圆角边框效果

本文介绍的是用图片实现的圆角边框效果,如果运用得当,一定可以让你的页面增色不少。

用图片实现圆角边框的效果 – 示例

 

 代码如下 复制代码

<style type="text/css">

.box, .box .content, .box .title, .box .title * { background: #FFF url('bg_box_green_800x800.gif') 100% 100% no-repeat; }

.box { margin: 3px 0; padding: 0 15px 0 0; }

.box .title { background-position: 100% 0; margin: 0 -15px 0 0; padding: 0 15px 0 0; }

.box .title * { background-position: 0 0; margin: 0; padding: 15px 0 5px 15px; height: 1%; }

.box .content { background-position: 0 100%; margin-right: 0px; padding: 0 0 15px 15px; }

.box .title h4 { color: #227A1D; }

.box .content p {margin:0; padding:8px 0;}

 

</style>

<div class="box">

<div class="title">

<h4>Codebit.cn - 聚合小段精华代码</h4>

</div>

<div class="content">

 

<p>在编程的过程中,我们通常都会积累很多简单、http://www.111cn.net 有效并且可重用的小段代码,一个简单的字符串处理函数或者一个验证邮件地址的正则表达式,又或者一个简单的文件上传类,甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间,但是时间一长,代码数量越来越多,寻找起来也耗费了不少时间。因此,本站致力于收集整理一些类似的小知识,并且努力提高文章搜索质量,一来方便大家查阅,二来也算是支持一下开源事业。</p>

 

</div>

</div>

时间: 2024-07-30 11:33:00

css与图片实现圆角边框效果的相关文章

用CSS实现鼠标经过图片链接加边框效果代码

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>用CSS实现鼠标经过图片链接加边框效果代码</title> </head> <style type="t

Android布局实现圆角边框效果_Android

首先,在res下面新建一个文件夹drawable,在drawable下面新建三个xml文件:shape_corner_down.xml.shape_corner_up.xml和shape_corner.xml,分别是下面两个角是圆角边框,上面两个角是圆角边框,四个角全部是圆角边框.  shape_corner_down.xml: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=

Android布局实现圆角边框效果

首先,在res下面新建一个文件夹drawable,在drawable下面新建三个xml文件:shape_corner_down.xml.shape_corner_up.xml和shape_corner.xml,分别是下面两个角是圆角边框,上面两个角是圆角边框,四个角全部是圆角边框. shape_corner_down.xml: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=&

js css 圆角边框效果代码

提示:您可以先修改部分代码再运行 圆角效果 本代码由网页特效网提供 提示:您可以先修改部分代码再运行

JQuery实现鼠标移动到图片上显示边框效果_jquery

复制代码 代码如下: 以下为程序代码:<!DOCTYPE html/> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <script type="text/javascript"> $(function() { $(".v&quo

兼容所有浏览器的纯css无图片实现圆角提示框

有研究的同志可以进一步完善! 有研究的同志可以进一步完善!

兼容IE6的图片圆角边框CSS

纯CSS实现的图片圆角边框效果,兼容IE6. 实现原理很简单,利用绝对定位,使一个背景为PNG图片的边框覆盖在原始图片上面.而兼容IE6,本文用的是一段JS来让万恶的万万人诅咒的IE6识别PNG图片的.当然,你还可以用滤镜的方式让IE6实现PNG效果.本文后面我会附上两种解决方案.个人比较推崇用JS来实现IE6PNG,适应性比较强,但如果你只有一两处用到PNG,完全可以用滤镜的方式来实现.核心CSS代码: .i_roundimg{ background:url(http://mrthink.ne

图解css3:核心技术与案例实战. 3.4 CSS3圆角边框属性

3.4 CSS3圆角边框属性 在Web页面上圆角效果很常见.圆角给页面增添曲线之美,让页面不那么生硬,但是为了设计圆角效果,Web设计师们要花费更多的时间与精力. 3.4.1 border-radius属性的语法及参数 CSS3中专门针对元素的圆角效果增加了一个圆角属性border-radius.Web设计师不会为Web页面中的圆角效果纠结了. 语法: border-radius: none | <length> {1,4}[/<length>{1,4}] ? border-rad

css实现图片圆角效果代码

 代码如下 复制代码 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu