Rumah > Artikel > hujung hadapan web > css圆角边框代码怎么写？（代码示例）

css圆角边框代码怎么写？（代码示例）

藏色散人asal: 2018-08-13 16:52:514401semak imbas

本篇文章主要给大家介绍css边框效果怎么实现的。

css圆角边框代码具体示例如下：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css圆角边框代码实例</title>
    <meta charset="UTF-8">
    <style type="text/css">
        div
 {
            color: white;
            text-align:center;
            border:2px solid #a1a1a1;
            padding:10px 40px;
            background: #029789;
            width:350px;
            border-radius:25px;
            -moz-border-radius:25px; /* 老的 Firefox */
 }
    </style>
</head>
<body>

<div>css边框设置使用border-radius 属性即可向元素添加圆角。</div>
</body>
</html>

效果如下图：

这里涉及主要的属性就是border-radius，利用此属性可进行css圆角边框调节的功能。

注：border-radius的使用方法：

border-radius: 1-4 length|% / 1-4 length|%;

按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

-webkit-border-radius 是为了兼容 chrome 或 safari。

-moz-border-radius 是为了兼容火狐。

以上就是关于css圆角边框代码的具体介绍，希望对有需要的朋友有所帮助。

Atas ialah kandungan terperinci css圆角边框代码怎么写？（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css chrome safari webkit border

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：css实现3d动画特效的代码实例Artikel seterusnya：CSS中常用样式的总结以及css中常用的属性总结

Artikel berkaitan

Lihat lagi