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

 <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. [iOS]C语言技术视频-01-变量的定义

    下载地址: 链接: http://pan.baidu.com/s/1eQJaVwY 密码: c7j8

  2. 使用node-livereload自动刷新页面

    1. 安装node 2. 安装python 3. 安装connect, serve-static和node-livereload (以下都假设命令行当前目录为e:\WebSite) e:\WebSit ...

  3. java中try 与catch的使用

    (2011-10-08 17:08:43) 转载▼ 标签: 杂谈 分类: Java try{//代码区}catch(Exception e){//异常处理}代码区如果有错误,就会返回所写异常的处理. ...

  4. 一个很好玩的命令：stty

    stty命令修改终端命令行的相关设置.语法stty(选项)(参数)选项-a:以容易阅读的方式打印当前的所有配置:-g:以stty可读方式打印当前的所有配置.参数终端设置:指定终端命令行的设置选项.实例 ...

  5. PHP 安装 redis、memcached、openssl、pdo_mysql等

        PHP openssl 扩展的安装 这些插件可以通过在 php.ini 中添加 extension 的方式来加载所需要的插件,其实在 php 的安装包里就已经有相关的插件代码包了,在 php7 ...

  6. Linux安装php的Redis扩展

    1.安装redis 下载:https://github.com/nicolasff/phpredis/archive/2.2.4.tar.gz 上传phpredis-2.2.4.tar.gz到/usr ...

  7. 歪国人DIY的MINI四轴

    歪国人DIY的MINI四轴 Crazyflie 2.0 自己仿Crazyflie.CrazyPony

  8. STM8建立IAR工程

    STM8是意法半导体公司出的增强型八位单片机,性能比51单片机强大,而且价格便宜,在商业应用中很受欢迎 在STM8的开发工程中主要有两种开发工具链.第一是使用IAR开发环境,第二十使用cosmic+s ...

  9. realvnc的卸载

    我安装了realvnc5.3.2后,采用如下方式卸载: (1)用如下命令查询当前安装的realvnc包的全名: rpm -qa realvnc-vnc-server (2) rpm -e 查询到的安装 ...

  10. ios页面跳转

    reference:http://blog.csdn.net/engandend/article/details/11706323 目前,就我所学到的内容,页面跳转有三种方法 一.直接推到下一个页面 ...