css3圆角效果代码

最新推荐文章于 2021-06-23 16:50:27 发布
最新推荐文章于 2021-06-23 16:50:27 发布
阅读量279 收藏
点赞数
分类专栏： html 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xsht878/article/details/53996652
版权


兼容模式无效时追加标签：<meta http-equiv ="X-UA-Compatible" content="IE=9" />  或者 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv ="X-UA-Compatible" content="IE=9" />
    <title>Login_Page</title>
    <script src="js/jquery-1.12.2.min.js"></script>
    <script src="js/jscookies.js"></script>
    <script type="text/javascript" >
        $(document).ready(function () {
            if (checkCookie("valID")) {
                var user = getCookie("valID");
                $("#username").val(user);
            }
        });

        function logon() {
            if ($("#username").val().length < 6 || $("#password").val().length < 5) {
                alert("UserID and Password length less than 5 bits, enter 5 -digit UserID and password ");
            } else {
                var valID = $("#username").val();
                var valPS = $("#password").val();
                setCookie("valID", valID, 365);
                //valPS = valPS.replace(/\+/g, "%2B");
                valPS = encodeURI(valPS, "UTF-8");
                valPS = encodeURI(valPS, "UTF-8");
                var valtest = encodeURIComponent(valPS);
                window.location.replace("Forms/logon.aspx?" + "valID=" + valID + "&valPS=" + encodeURIComponent(valPS) + "&valtest=" + valtest);
            }
        }

        function quit() {
            $(".text").val("");
        }

    </script>
    <style type="text/css">
        body{
            background-color:#fce8fc  ;
        }
        #win {
            position: absolute;
            width: 230px;
            height: 130px;
            background-color: #ff9fff;
            text-align: center;
            left: 50%;
            top: 50%;
            margin-top: -110px;
            margin-left: -110px;
            border-radius: 20px;
        }
            #win:hover {
                border: solid 1px;
                border-color: blue;
                background-color: #fce8fc;
            }
        table{
            border-collapse:collapse;
            margin:10px 10px;
        }
       
        .text {
            width: 120px;
            color:blue;
        }
        th{
            text-align:left;
            border-left:none;
            border-top:none;
            border-right:none;
            color:blue;
            height:25px;
        }
        td{
            border:1px solid;
        }
        #test {
            width: 300px;
            /*position: relative;*/
            position: absolute;
            height: 210px;
            background-color: #ff9fff;
            border-top-right-radius: 30px;
            -moz-border-top-right-radius: 30px;
            -moz-border-top-right-radius: 30px;
            -moz-border-radius-bottomright: 30px;
            -webkit-border-top-left-radius: 30px;
            -webkit-border-bottom-left-radius: 30px;
            border-radius: 30px;
            -moz-border-radius: 30px;
            -webkit-border-radius: 30px;
            left: 50%;
            top: 50%;
            margin-top: -170px;
            margin-left: -150px;
            text-align:center;
            font-size:18px ;
            font-weight:bold ;
            font-family:'Microsoft YaHei';
        }
       
        #testL {
            width: 50px;
            position: absolute;
            height: 50px;
            background-color: #ff9fff;
            border-radius: 50px;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            left: 50%;
            top: 50%;
            margin-top: 10px;
            margin-left: -180px;
            border-width:5px;
        }
        #testD {
            width: 300px;
            /*position: relative;*/
            position: absolute;
            height: 210px;
            background-color: #ffd800;
            border-top-right-radius: 30px;
            -moz-border-top-right-radius: 30px;
            -moz-border-top-right-radius: 30px;
            -moz-border-radius-bottomright: 30px;
            -webkit-border-top-left-radius: 30px;
            -webkit-border-bottom-left-radius: 30px;
            border-radius: 30px;
            -moz-border-radius: 30px;
            -webkit-border-radius: 30px;
            left: 50%;
            top: 50%;
            margin-top: -166px;
            margin-left: -146px;
        }
    </style>
</head>
<body>
    <div id="testD"></div>
    <div id="test" >
        <br/>
    </div>
    <div id="win">
        <table >
            <tr>
                <th colspan="2">Logon:</th>
            </tr>
            <tr>
                <td>用户名：</td>
                <td><input type="text" id="username" class="text" placeholder="请输入用户名" /></td>
            </tr>
            <tr>
                <td>密  码：</td>
                <td><input type="password" id="password" class="text" placeholder="请输入密码" /></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" id="submit" value="确定" οnclick="logon()" />
                    <input type="reset" id="reset" value="取消" οnclick="quit()" />
                </td>
            </tr>
        </table>
    </div>
    <div id="testL"></div>
</body>
</html>

许双涛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3实现圆角矩形
04-11
css3实现圆角矩形 使用border-radius实现圆角，兼容到IE6
CSS3圆角矩形
qq_43198727的博客
11-09 2672
今天要说的是圆角矩形 语法规则 border-radius: 左上右上右下左下; head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...
书小宅之网页设计CSS3——圆角矩形
qq_36447261的博客
07-28 460
圆角半径四个方向的参数都写时，对应的顺序是左上，右上，右下，左下。 border-radius: 1-4 length|% / 1-4 length|%; 注释：按此顺序设置每个 radius 的四个值方向的圆角占类元素宽和高的百分比。 如果省略 bottom-left，则与 top-right 相同。 如果省略 bottom-right，则与 top-left 相同。 如果省略 top-rig......
css+div实现圆角矩形代码总结
chengzhaolu的专栏
01-05 1446
css实现圆角矩形
weixin_45321331的博客
05-27 4444
一个在日常开发中，前端人员经常会遇到圆角矩形，让我们一起来学习一下圆角矩形吧，下面直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=], initial-scale=1.0"> <title>Document</title> &lt
Css3圆角边框制作代码
12-09
经常看到别人的网站有个边框来修饰文字区域，类似圆角矩形把文字环绕起来，特别有感觉，于是就试着用图片边框来修饰，但是用图片过多会拉慢网页的加载速度，能不能使用css3来实现边框圆角效果呢？当然border-radius...
CSS3 圆角效果
12-08
现在使用CSS3 技术不需要图片即可实现圆角，把侧边栏标题背景的圆角效果和搜索框的圆角效果用 CSS3 实现。记录一下以便以后使用。W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性：border-radius，Firefox 和 Safari ...
css实现无图圆角效果特效代码
03-20
CSS3圆角代码
06-11
CSS3圆角代码 基于jQuery+CSS的圆角框效果，演示一下如何使用jQuery并配合CSS代码实现漂亮的圆角框效果。 提示：本圆角效果在IE下显示有问题，在Opera及火狐及Google浏览器下都没有问题。
html css画圆角矩形,用DIV+CSS设计出圆角矩形的代码_HTML与CSS教程_电脑知识学习_培训之家...
weixin_39615596的博客
06-09 190
用DIV+CSS设计出圆角矩形的代码为http://www.pxzj8.com整理发布，类型为HTML与CSS教程，本站还有更多关于html与css教程,css教程,html网页设计教程,css视频教程,css教程下载，电脑知识学习 - 网页制作 - HTML与CSS教程的文章。正文：电脑术语解释大全 http://www.pxzj8.com很多人到处寻求个使用DIV+CSS制作出圆角矩形的方法，...
各种css圆角矩形代码
yanwei4444的专栏
01-19 1479
各种css圆角矩形代码 http://www.aspprogram.cn 0:50:56 121wang 通常使用图片做圆角矩形的时候，如果直接将圆角矩形作为背景图片，如果页面上很多处都是这样使用的，这样就会影响网站打开速度，遇到背景图片自动增加那种，就不能实现了。 如果将圆角矩形分割成上中下三个，可实现背景自动增加，但要实现这个效果，需要将圆角矩形分割成三个图片或更多，图片用的过多，影响...
CSS3实现DIV圆角完整代码
liudanyang_21的博客
07-12 223
本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9以上。IE6、7、8不支持。 在线预览效果：http://hovertree.com/texiao/css/4.htm 画圆型的例子：http://hovertree.com/h/bjae/css3circle.htm 实际应用：http://hovertree.com/texiao/jquerytree/3/ 测试:http:
利用css3绘制一个圆角边框
destiny1234544的博客
06-02 457
在css3出现之前，我们要定义一个圆角边框，需要提前绘制好图形，但是在追求效率的需求下，css3推出了边框样式大大提升了网页制作的效率，用户只需要输入一段简单的代码就可以绘制圆角边框，这就需要使用到css3中的border-radius属性，我们只需要在border-radius属性中定义半径R就可以实现圆角的效果，下图是未实现圆角前的效果： 下面展示一些 border-radius的内联代码片。 // A code block var foo = 'bar'; // An highlighted bl
将图片四角变为圆角的CSS代码
weixin_33714884的博客
08-23 873
代码简介： 最近见到Facebook网站的图片圆角很特别，将一张方角的图片经过CSS定义后自动变成了圆角，后来研究了一番，发觉是用CSS控制一个圆角背景图片叠加而成，值得学习，不过因为是Facebook的资源图片，你在变动图片大小的时候最好将背景图片也变大。 　　注意，本效果在IE7以下版本浏览器有问题。 代码内容： View Code <!DOCTYPEhtmlPUBLI...
div+css实现圆角边框：
chende_an的专栏
05-14 594
div+css实现圆角边框：在网络上查看了一下div+css实现圆角边框，很多都是实现圆角的矩形的方法，我在这里介绍的是实现圆角矩形边框的方法。用代码说明问题：#a{border-left:1px #333 solid;border-right:1px #333 solid;width:300px;height:500px;}.b{height:1px;overflow:hidden;border
css 边框圆角
我的博客
08-20 4325
记录一下使用border-radius使边框变成圆角的方法 构造圆形的方法 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;/head&gt; &lt;styl
CSS3详解：border-radius
weixin_34162629的博客
03-07 134
讲到css3的border-radius这个玩意，可以很好玩。比如：圆角矩形，圆，椭圆等等。 CSS3 border-radius是什么？ border-radius的含义是：圆角。 CSS3 border-radius的书写格式： border-radius:apx，比较常见，其中a表示数值，下同； -webkit-border-top-left-radius:...
CSS 实现圆角边框
火星基地
06-23 433
实现元素圆角： 1. border-radius .demo { width: 100px; height: 100px; background-color: blue; border-radius: 20px; } 2. clip-path .demo { width: 100px; height: 100px; background-color: blue; clip-path: inset(0 round 20px); } ...
html中对局部图片进行圆角处理,CSS3实现DIV圆角效果完整代码
weixin_30555169的博客
06-04 818
复制代码代码如下:CSS3实现DIV圆角 - CSS3教程 - 计划 - 博客园 #yuanjiao{font-family: Arial;border: 2px solid #379082;border-radius: 20px;padding: 30px 30px;width: 330px;}本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是： "border-radius: 20px...
css梯形底部反圆角效果
最新发布
06-10
要实现 CSS 梯形底部反圆角效果，可以使用伪元素和 `clip-path` 属性来实现。具体的实现步骤如下： 1. 首先，创建一个正常的矩形盒子，设置它的宽度和高度。 2. 使用 `transform: skew()` 属性将盒子倾斜一定角度，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值