如图所示的圆角边框有两个元素很好实现，用一个元素也可以实现。

 <html>
 <head>
     <meta charset="utf-8">
     <title>灵活的背景定位2</title>
     <style type="text/css">
     div{
         max-width: 10em;
         border-radius: .8em;
         padding: 1em;
         margin: 1em;
         background: tan;
         font:100% / 1.5 sans-serif;
     }
     </style>
 </head>
 <body>
     <div>I have a nice inner rounding, don't I look pretty?</div>
 </body>
 </html>

以上代码生成的图案还没有边框：

加上：box-shadow:0 0 0 .6em #665，生成边框，边框跟随内容的形状：

加上outline的边框，边框宽度要大于（根号2-1）*圆角的半径，可以直接取0.5倍的半径，outline:.5em solid #665;

[css]《css揭秘》学习（四）-一个元素实现内圆角边框的更多相关文章

  1. CSS3利用一个div实现内圆角边框效果

    *首先要清楚的是,box-shadow的形状会随着border-radius变化.下面的例子可以证明: <!doctype html> <html lang="en&quo ...

  2. css:hover状态改变另一个元素样式的使用

    效果演示 css:hover状态改变另一个元素样式的使用 .box { width: 150px; height: 150px; background-color: #069; line-height ...

  3. css进阶 04-如何让一个元素水平垂直居中？

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

  4. CSS权威指南学习笔记 —— HTML元素分类

    HTML文档由各种元素组成.比如,p.table.span等等.每个元素都会对文档的表现有所影响.CSS中,每个元素都会生成一个框(传说中的盒子),其中包含元素内容. 元素可以根据它的创建方式分为两种 ...

  5. css总结17:HTML块级元素&行内元素之分: <div> 和<span>

    1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, &l ...

  6. 用CSS的方法如何让一个元素不可见？（面试题目）

    面试中看到这个问题,自己想的不全面,下面整理下,一起学习: 一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应 ...

  7. wordpress学习四: 一个简单的自定义主题

    在学习三里分析了自带的一个例子,本节我们就自己仿照他做个简单的吧,重点是调用wordpress封装好的函数和类,css和html可以稍好在调整. 将wp带的例子复制一份处理,重新名个名字. 清空ind ...

  8. JMS学习(四)-一个简单的聊天应用程序分析

    一,介绍 本文介绍一个简单的聊天应用程序:生产者将消息发送到Topic上,然后由ActiveMQ将该消息Push给订阅了该Topic的消费者.示例程序来自于<JAVA 消息服务--第二版 Mar ...

  9. CSS一个元素同时使用多个类选择器（class selector）

    CSS类选择器参考手册 一个元素同时使用多个类选择器 CSS中类选择器用点号表示.实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div ...

随机推荐

  1. The 2014 ACMICPC Asia Regional Xian Online

    [A]签到题 [B]后缀数组 [C]染色,DP(感觉可出) [D]BFS搜索,有点麻烦 [E]博弈论,Nim博弈 [F]BFS状态搜索 [G]概率DP+状态压缩 [H]异或+构造 [I]矩阵快速幂(队 ...

  2. CMU机器学习课程－简介

    CMU在机器学习研究领域大名鼎鼎,Tom Mitchell 即是该学校老师.学校开设有机器学习课程.如今机器学习应用的领域越来越广泛,之前传统的<机器学习>课程,现在分成一般非机器学习领域 ...

  3. [Java]局域网五子棋

    提示: 下面给的代码有问题哦,可以自己去调试 可用版下载 请点击这里 密码:x6ve(退出程序,端口并没有被关闭,可自行修改代码实现) img

  4. (简单) ZOJ 3209 Treasure Map , DLX+精确覆盖。

    Description Your boss once had got many copies of a treasure map. Unfortunately, all the copies are ...

  5. iOS学习笔记1--在xcode6以上的版本中不使用storyboard以及部分控件使用

    首先建立一个iOS新工程,删除工程自动建立的main.storyboard以及xib文件,并且在info.plist上删除这两个选项 然后在项目配置中将maninterface设置为空,将launch ...

  6. HUST 1371 Emergency relief

    状态压缩. 每一个人所需的物品对应一个数字,统计一个每个数字有几个.每一种提供物品的状态也对应一个数字,然后暴力判断. #include<cstdio> #include<cstri ...

  7. photoshop如何快速切图

    作为业余爱好,之前都是用比较笨的方法切图,甚至用裁剪工具一张一张的切. 后来知道用切片工具,但也仅限于互不重叠的图片. 在工作中实际使用时才发现实在是太慢了,慢到上级自己说你不用做了,我来吧. 其实, ...

  8. PHPCMS快速建站系列之搜索功能

    默认模板的搜索功能代码 <div class="bd"> <form action="{APP_PATH}index.php" method= ...

  9. STM32驱动DS18B20

    DS18B20 是由 DALLAS 半导体公司推出的一种的“一线总线”接口的温度传感器.与传 统的热敏电阻等测温元件相比,它是一种新型的体积小.适用电压宽.与微处理器接口简单的 数字化温度传感器.一线 ...

  10. ImageView的展示方式

    [转]http://www.cnblogs.com/yejiurui/archive/2013/02/25/2931767.html   在网上查了好多资料,大致都雷同,大家都是互相抄袭的,看着很费劲 ...