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

 <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. [转]ASP.NET Core 1 Deploy to IIS

    本文转自: http://webmodelling.com/webbits/aspnet/aspnet-deploy-iis.aspx 15 Sep 2016. This tutorial will ...

  2. Linux 分区和目录解析

    转自:http://www.cnblogs.com/apprentice89/archive/2012/12/17/2821332.html 计算机中存放信息的主要的存储设备就是硬 盘,但是硬盘不能直 ...

  3. 虚拟机联网及远程连接-Linux基础环境命令学习笔记

    1.ifconfig命令=ip a命令,查看IP地址 网卡默认名称eth0. Bcast 广播地址2.xshell or secureCRT远程连接 ssh root@地址 xmanager 远程桌面 ...

  4. Phplot--一些记录

    1.一张图片画俩次 需要设置 $phplot->SetPrintImage(0); 参考  http://www.phplot.com/phplotdocs/ex-twoplot1.html

  5. IOS开发中如何判断程序第一次启动（根据判断结果决定是否显示新手操作引导）

    IOS开发中如何判断程序第一次启动 在软件下载安装完成后,第一次启动往往需要显示一个新手操作引导,来告诉用户怎么操作这个app,这就需要在程序一开始运行就判断程序是否第一次启动,如果是,则显示新手操作 ...

  6. UVa 10346 - Peter's Smokes

    题目大意:Peter有n支烟,每k个剩下的烟头可以卷成一支新烟,问Peter能吸多少跟烟? 简单数学题. #include <cstdio> int main() { #ifdef LOC ...

  7. Nodejs之package.json介绍说明

    规范的package.json及package.json中各属性的作用. "name":包名. "description":包简介. "author& ...

  8. 12.TCP的成块数据流

    1.滑动窗口协议             TCP滑动窗口的可视化表示       我们将字节从1到11进行标号,接收方通告的窗口称为提供的窗口,它覆盖了第4字节到第9字节的数据,且通告窗口大小为6.发 ...

  9. 堡垒机--paramiko模块

    做堡垒机之前,来了解一下paramiko模块. 实际上底层封装的SSH. SSHclient(1) import paramiko #实例化一个ssh ssh = paramiko.SSHClient ...

  10. Spark中的键值对操作-scala

    1.PairRDD介绍     Spark为包含键值对类型的RDD提供了一些专有的操作.这些RDD被称为PairRDD.PairRDD提供了并行操作各个键或跨节点重新进行数据分组的操作接口.例如,Pa ...