文档章节

CSS实现圆角边框的完美解决方案

前端老手
 前端老手
发布于 09/20 16:40
字数 485
阅读 13
收藏 0

css实现图片圆角,兼容所有浏览器:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style type= "text/css" >
/*通用样式--容器宽度值*/
.sharp{ width : 907px ; height : 606px ; margin-top : 20px ;
float : left ; margin-left : 10px ; display : inline ;}
.sharp .content div{ padding : 10px ; text-indent : 2em ;}
.content{ height : 598px ;} /*这个高度值等于图片的高度值-8px*/
/*圆角框通用设置样式,如果要运用多个不同颜色,以下部分不用重新变化--------------*/
.b 1 ,.b 2 ,.b 3 ,.b 4 ,.b 5 ,.b 6 ,.b 7 ,.b 8 { height : 1px
font-size : 1px overflow : hidden display : block ;}
.b 1 ,.b 8 { margin : 0  5px ;}
.b 2 ,.b 7 { margin : 0  3px ; border-right : 2px  solid border-left : 2px  solid ;}
.b 3 ,.b 6 { margin : 0  2px ; border-right : 1px  solid border-left : 1px  solid ;}
.b 4 ,.b 5 { margin : 0  1px ; border-right : 1px  solid border-left : 1px  solid height : 2px ;}
.content { border-right : 1px  solid ; border-left : 1px  solid ; overflow : hidden ;}
/*图片偏移定位--上面部分*/
.sharp b.b 2 { background-position : -4px  top ;}
.sharp b.b 3 { background-position : -2px  -1px ;}
.sharp b.b 4 { background-position : -1px  -2px ;}
/*图片偏移定位--下面部分*/
.sharp b.b 7 { background-position : -4px  bottom ;}
.sharp b.b 6 { background-position : -2px  bottom ;}
.sharp b.b 5 { background-position : -1px  bottom ;}
/*颜色方案一----------------------------------------*/
/*边框色*/
.color 1  .b 2 ,.color 1  .b 3 ,.color 1  .b 4 ,.color 1  .b 5 ,.color 1
  .b 6 ,.color 1  .b 7 ,.color 1  .content{ border-color : #dce4f5 ;}
.color 1  .b 1 ,.color 1  .b 8 { background : #dce4f5 }
/*图片路径*/
.color 1  .b 2 ,.color 1  .b 3 ,.color 1  .b 4 ,.color 1  h 3 ,.color 1  .b 5 ,.color 1  .b 6 ,.color 1  .b 7 ,.color 1 
.content{ background : url (http://www.hello- code .com/usr/uploads/ 2012 / 10 / 4085139866 .png)
  no-repeat ;}
.color 1  .content{ background-position : left  -4px ;}
</style>
<div class="sharp color1">
     <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
     <div class="content"> 
     </div>
     <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>   
</div>

本文转载自:https://www.mk2048.com/blog/blog.php?id=jjabkaaaa

前端老手
粉丝 10
博文 578
码字总数 0
作品 0
卢湾
技术主管
私信 提问
你该知道的《css揭秘》--背景与边框篇

半透明边框 background-clip background-clip: border-box|padding-box|content-box; 默认是border-box。该属性规定背景的绘制区域,通俗点讲就是,能背景可以延伸的范围,三个属性值从字面上...

victor318x
2018/12/24
0
0
不定期更新的CSS奇淫技巧(二)

拖更很久,各位小哥哥、小姐姐别介意,今天本来会死在襁褓(草稿待了一个月)中的 不定期更新的CSS奇淫技巧(二)终于出来了,本文可能会水份居多,如有问题欢迎提议我会逐步榨干它 七、CSS...

小小茂茂
2018/08/08
0
0
css揭秘 - 背景与边框 [一]

前言 这段时间,一直觉得css这块感觉每次写代码都是常用的那些基本属性,觉得始终没有对css有一个更深层次的掌握,所以,最近开始学习css相关进阶知识,首先第一关就是攻克 “css揭秘” 这本...

沉默抒怀者
04/18
0
0
Web开发者选择的最佳HTML5/CSS3代码生成器

原文地址:http://codecloud.net/css3-code-generators-for-web-programmers-6672.html HTML5 和CSS3是一入门就能用的最好的语言,最简单同时也最好的的方式就是直接开始做!那么生成器就在自...

数通畅联
2015/11/30
265
0
retina屏中1物理像素border的实现

问题的产生 retina屏会以2个(乃至3个)物理像素来显示一个CSS像素(1px),所以在CSS中指定1px的边框实际占据的却是2个以上物理像素,在retina屏用户体验较差。 几种解决方案(考虑1px=2di...

LevonLin
2017/11/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

常用正则表达式整理

本文转载于:专业的前端网站➩常用正则表达式整理 /*以下为亲自验证过,备用*/   数字,0-100,包含0和100,且小数点后最多有三位: /^(\d{1,2}(\.\d{1,3})?|100)$/ 匹配正整数:^[1-9]*[1-9][...

前端老手
9分钟前
3
0
Java 中可重入锁、不可重入锁的测试

Java 中可重入锁、不可重入锁的测试 可重入锁 指在同一个线程在外层方法获取锁的时候,进入内层方法会自动获取锁。 为了避免死锁的发生,JDK 中基本都是可重入锁。 下面我们来测试一下 sync...

ConstXiong
9分钟前
2
0
怎么给视频变音

怎么让录制视频中的声音变得可爱吗?其实方法非常的简单,只要进行视频变音制作就好了,那怎么给视频变音呢?下面就一起来看看视频变音的具体制作方法吧! 具体步骤如下: 第一步: 打开手机...

白米稀饭2019
13分钟前
2
0
学习记录(ECMAScript 6.0入门_day01重点总结)

课程目标 1、ECMAScript6和JAVAScript关系 ES6是JAVAScript的规格,JavaScript是ES6的一种实现。 变量声明: 局部变量:let 它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内...

庭前云落
25分钟前
2
0
springboot 源码SpringApplication的run方法解析

public ConfigurableApplicationContext run(String... args) {//记录启动应用启动时间StopWatch stopWatch = new StopWatch();stopWatch.start();ConfigurableApplicationCo......

dudu
27分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部