css怎样大边框里面再加个小边框

html-css014

css怎样大边框里面再加个小边框,第1张

使用outline+outline-offset实现多重边框

如果我们只需要绘制两层边框,使用outline也可以做到。outline是border外面的一层,和border原理一样。通过设定outline的样式可以为border外面再设定一层边框。但是需要注意的是,outline属性设定的边框不会随着内部元素边界样式的变化而变化。也就是说,如果元素边框带了圆角,那么outline绘制出的最外层边框仍然是矩形的。这是outline绘制边框的一个缺憾。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

.title{

  border-bottom:1px solid #666

  line-height:35px

}

.title strong{

  border-bottom:3px solid #F93

  line-height:35px

  display:inline-block

  margin-bottom:-2px

}

.title strong span{

  font-weight:normal

  padding:0 15px

}

</style>

</head>

<body>

<h2 class="title">

<strong>大赛评委团<span>English</span></strong>

</h2>

</body>

</html>

用CSS给一个对象加两个边框是不能做到的,除非你用两个div,一个用于最外面的黑边框,一个用于放图片并设置白边框,但我想楼主的所看到的效果是不是网页背景是白色的,然后一个div里有一张图片,这个div的边框是黑色的,而且这个div的内边距是1px,这样看上去的效果就是在一张图片上有一黑一白两个边框的效果。