zoukankan      html  css  js  c++  java
  • 用CSS制作的圆角层

     1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     2<html>
     3<head>
     4<title>Nifty Corners: HTML CSS rounded corners</title>
     5<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
     6<meta name="generator" content="HAPedit 3.1">
     7<style type="text/css">
     8body{padding: 20px;background-color: #FFF;
     9font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}

    10h1,h2,p{margin: 0 10px}
    11h1{font-size: 250%;color: #FFF}
    12h2{font-size: 200%;color: #f0f0f0}
    13p{padding-bottom:1em}
    14h2{padding-top: 0.3em}
    15div#nifty{ margin: 0 10%;background: #9BD1FA}
    16
    17b.rtop, b.rbottom{display:block;background: #FFF}
    18b.rtop b, b.rbottom b{display:block;height: 1px;
    19overflow: hidden; background: #9BD1FA}

    20b.r1{margin: 0 5px}
    21b.r2{margin: 0 3px}
    22b.r3{margin: 0 2px}
    23b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
    24
    </style>
    25</head>
    26<body>
    27<div id="nifty">
    28<class="rtop"><class="r1"></b><class="r2"></b><class="r3"></b><class="r4"></b></b>
    29<h1>HEADER</h1>
    30<p>CONTENT - 1</p>
    31<h2>HEADER</h2>
    32<p>CONTENT - 2.</p>
    33<class="rbottom"><class="r4"></b><class="r3"></b><class="r2"></b><class="r1"></b></b>
    34</div>
    35</body>
    36</html>
    37
  • 相关阅读:
    vue 组件
    vue 中的computed和watch
    Vue 框架 笔记
    初次使用git配置以及git如何使用ssh密钥(将ssh密钥添加到github)
    JavaScript 执行机制
    Vue.js 动画
    封装nodeJS中 $on $emit $off 事件
    JS中的事件委托
    什么是“闭包”(closure)为什么要用它?
    js使用面向对象编写下拉菜单
  • 原文地址:https://www.cnblogs.com/cnaspnet/p/412659.html
Copyright © 2011-2022 走看看