zoukankan      html  css  js  c++  java
  • CSS3 Border中的borderradius

    1、CSS3 Border中的border-radius
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css"> 
    div
    {
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    300px;
    border-radius:125px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    }
    </style>
    </head>
    <body>
    
    <div>The border-radius property allows you to add rounded corners to elements.</div>
    
    </body>
    </html>
    

      2、阴影效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    	div
    	{ 
    	300;
    	height:200px;
    	background-color:#009999;
    	box-shadow:10px 10px 5px #888888;
    	}
    </style>
    </head>
    
    <body>
    	<div style="height:200px; 300px"></div>
    </body>
    </html>
    

      效果图:

  • 相关阅读:
    边框的各种样式
    内容溢出显示省略号
    UNIAPP开发注意事项
    css文本的三条线 删除线 下划线 上划线
    防抖截流
    浏览器窗口改变触发的函数
    ES5数组方法
    弹性布局
    ubuntu16.04 安装adb
    git clone
  • 原文地址:https://www.cnblogs.com/linlf03/p/2318990.html
Copyright © 2011-2022 走看看