border-radius不僅僅可以用來畫圓哦

阿新 • • 發佈：2019-02-13

border-radius

可以設定四個角的值
每個角的值可以設定為百分比或長度
每個角可以設定水平或垂直方向的值

<html>

<head>
    <meta charset="utf-8">
    <style>
        .circle {
            width: 100px;
            height: 100px;
            background-color: #fb3;
            border-radius: 50%;
        }

        .ellipse 
 {
            width: 100px;
            height: 50px;
            background-color: #fb3;
            /*百分比*/
            border-radius: 50%;
        }

        .half-ellipse-top {
            width: 100px;
            height: 50px;
            background-color: #fb3;
            /*top-left,top-right,bottom-right,bottom-left*/ 

            /* 水平方向/垂直方向*/
            border-radius: 50% / 100% 100% 0 0;
        }

        .half-ellipse-left {
            width: 100px;
            height: 50px;
            background-color: #fb3;
            /*top-left,top-right,bottom-right,bottom-left*/
            /* 水平方向/垂直方向*/
            border-radius: 100 
% 0 0 100% / 50%;
        }

        .quarter-ellipse {
            width: 100px;
            height: 50px;
            background-color: #fb3;
            /*top-left,top-right,bottom-right,bottom-left*/
            /* 水平方向/垂直方向*/
            border-radius: 100% 0 0 0;
        }

        .diagonal {
            width: 200px;
            height: 100px;
            border-radius: 40px 10px;
            background-color: #fb3;
        }

        .box {
            border: ridge gold;
            border-radius: 13em/3em;
            width: 200px;
            height: 100px;
            background-color: #fb3;
        }
    </style>
</head>

<body>
    <div class="circle"></div>
    <div class="ellipse"></div>
    <div class="half-ellipse-top"></div>
    <div class="half-ellipse-left"></div>
    <div class="quarter-ellipse"></div>
    <div class="diagonal"></div>
    <div class="box"></div>
</body>

</html>

這裡寫圖片描述

border-radius不僅僅可以用來畫圓哦

border-radius 可以設定四個角的值每個角的值可以設定為百分比或長度每個角可以設定水平或垂直方向的值 <html> <head> <meta

小程式用view畫圓

畫多種圓效果圖 test.wxml <view class='wrpg-top'> <view class='clike'> <view class="element"> <view class="child

用滑鼠畫圓（java GUI）

話不多說，先看效果當然你也可以發揮腦洞繪製更更棒的原始碼如下： package javaBasic; import java.awt.*; import java.awt.event.*; import javax.swing.*; import java.util.*;

用turtle實現用正方形畫圓

最近發現一個很有意思的畫圖的python庫，叫做turtle，這裡先說下用turtle這個庫來實現用正方形畫圓的思路。每次都用烏龜（turtle）來畫出一個正方形，然後通過旋轉3°後，繼續畫一樣的正方形，在通過120次迴圈後就實現了完整的圓，這裡當然也可以用其他的角度和次數，只要能

Python中使用turtle用正方形畫圓

import turtle def draw_square(): brad = turtle.Turtle() brad.shape("turtle") brad.color

用echarts畫圓環圖，顯示進度條效果

要實現類似於下圖的效果，開始用的css畫出來的，感覺很複雜，換了echart省很多程式碼直接上程式碼： var e=80; var Chart4 = echarts.init(document.ge

ie9背景色gradient和border-radius同用bug

ie9中，背景色gradient和border-radius同時使用時，border-radius無效，可以用Ultimate CSS Gradient Generator解決. 網址：http://www.colorzilla.com/gradient-editor/

用css畫圓的長度固定的1/4邊

最普遍的做法 border-radius: n px 0 0 0; 在正方形的div中， n = divHeight時，使用上面的語句，就可以畫出1/4的圓，但是仔細看看，畫出的圓的半徑其實就是你最開始圓的直徑，也就是說你畫出的弧長或許是你的期望值的

HTML-border-radius-畫圓或橢圓

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #

border-radius畫圓

原文： https://www.cnblogs.com/s-b-b/p/5830119.html 初步學習border-radius 　　1.屬性解析　　border-radius是css3屬性，他可以使div的角進行一定程度的彎

使用border-radius畫圓並使字位於字的中心

需求：使用html畫一個圓，圓中有個字進行說明，並且使字居中。分析：首先畫圓，我第一個想法是用圖片，，被罵了一頓，然後想難道用canvas畫，又被罵了一頓，這才注意到CSS存在一個屬性border-radius。 border-radius本來是用於為di

CSS border-radius畫圓

1.CSS畫實心圓長度和寬度相等，border-radius設定為長度（寬度）的一半。 #circle { width: 200px; height: 200px; bac

用CSS3的圓角border-radius屬性,畫一個圓形

習慣了方方框框，我們會使用圓角技術使網頁變得很圓潤，而不是一個個稜角。圓角被廣泛運用於網頁中，比如把邊框加個圓角，這是最流行的用法，讓網頁看起來很舒服。還有就是使用者的頭像，把它做成一個圓形的，看到現在的網頁中出現的頻率也很大。以前製作圓角的方法比較繁瑣，山頂角、洋蔥皮、

用shape畫內圓外方，形成一個圓形頭像

imageview nco text 三角形圓形新建 watermark 透明技術分享很多人都有過這樣的經歷，想要在自己寫的程序裏，上傳一張隨便大小形狀的照片在程序裏顯示都是圓形照片，或者是方形，或者是三角形，但是寫代碼又非常麻煩，這裏就有一個也可以實現一樣效果的方

如何用border來畫三角形

學習總結 HTML <div class="son"></div> CSS .son{ &nbs

Python 用 OpenCV 畫點和圓

利用 opencv 裡自帶的circle() 函式可以繪製以一個點為圓心特定半徑的圓，其函式的宣告如下： cv2.circle(img, center, radius, color[, thicknes

用PL/SQL來畫一個直角三角形

一個簡單的for迴圈巢狀的小程式，大神看到勿噴，給初學者的一點小福利~~~ declare i binary_integer; j binary_integer; begin /* 利用for迴圈的巢狀來寫*/ for i in 1..5 loop for

用win32 api畫圓和橢圓

函式原型：BOOL Ellipse(HDC hdc, int nLeftRect, int nTopRect, nRightRect, int nBottomRect)；函式功能：該函式用於畫一個橢圓，橢圓的中心是限定矩形的中心，使用當前畫筆畫橢圓，用當前的

Django前端與後臺資料互動:用json傳輸資料到javascript來畫hichart圖表

前端和後臺的資料傳輸是個很重要的環節.專案需要把資料用hichart顯示出來,就涉及到Django後臺傳輸資料到javascript的問題. 因為圖表比較多,javascript部分寫到單獨的js檔案裡,不寫在html檔案裡,在html中呼叫js檔案. 網上

canvas畫圖：用滑鼠---畫曲線，直線，矩形，圓

<canvas id="canvas" width="800" height="500"></canvas> <script src="js/jquery-3.2.1.mi

border-radius不僅僅可以用來畫圓哦

相關推薦