可以实现单个、两个、四个圆角的qml自定义控件

控件名:
RadiusRectangle
File:
RadiusRectangle.qml

import QtQuick 2.0

Item {
    id: root
    width: 100
    height: 100
    clip: true
    property int itemRadius: 0
    property color itemColor: "red"
    property real itemOpacity: 1
    property int rightMargin: 0
    property int leftMargin: 0
    property int topMargin: 0
    property int bottomMargin: 0
    Rectangle {
        anchors.fill: parent
        width: 100
        height: 100
        color: root.itemColor
        opacity: itemOpacity
        anchors.rightMargin: -root.rightMargin
        anchors.leftMargin: -root.leftMargin
        anchors.topMargin: -root.topMargin
        anchors.bottomMargin: -root.bottomMargin
        radius: root.itemRadius
    }
}

使用：
main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 660
    height: 240
    title: qsTr("Hello World")

    SplitView
    {
        anchors.fill: parent
        orientation: Qt.Horizontal

        //一个圆角
        Grid
        {
            width: 200
            height: 200
            columns: 2
            rows: 2
            spacing: 20

            //画上边、左边直线==右下角圆角
            RadiusRectangle{
                itemRadius: 8
                topMargin: 8
                leftMargin: 8
                width: 80
                height: 80
                itemOpacity: 0.1//加上透明度
                itemColor: "red"
            }

            //画上边、右边直线==左下角圆角
            RadiusRectangle{
                itemRadius: 8
                topMargin: 8
                rightMargin: 8
                width: 80
                height: 80
                itemColor: "green"
            }


            //画下边、左边直线==右上角圆角
            RadiusRectangle{
                itemRadius: 8
                bottomMargin: 8
                leftMargin: 8
                width: 80
                height: 80
                itemColor: "purple"
            }

            //画下边、右边直线==左上角圆角
            RadiusRectangle{
                itemRadius: 8
                bottomMargin: 8
                rightMargin: 8
                width: 80
                height: 80
                itemOpacity: 0.5
                itemColor: "black"
            }
        }

        //两个圆角
        Grid
        {
            width: 200
            height: 200
            columns: 2
            rows: 2
            spacing: 20
            //下边直线==左上角和右上角
            RadiusRectangle{
                itemRadius: 8
                bottomMargin: 8
                width: 80
                height: 80
                itemColor: "blue"
                itemOpacity: 0.1
            }

            //上边直线==左下角和右下角
            RadiusRectangle{
                itemRadius: 8
                topMargin: 8
                width: 80
                height: 80
                itemColor: "yellow"
            }

            //右边直线==左上角和左下角
            RadiusRectangle{
                itemRadius: 8
                rightMargin: 8
                width: 80
                height: 80
                itemColor: "orange"
            }

            //左边直线==右上角和右下角
            RadiusRectangle{
                itemRadius: 8
                leftMargin: 8
                width: 80
                height: 80
                itemColor: "light blue"
                opacity: 0.8
            }
        }

        //四个圆角
        Grid
        {
            width: 200
            height: 200
            columns: 2
            rows: 2
            spacing: 20
            RadiusRectangle{
                itemRadius: 8
                width: 180
                height: 180

                itemColor: "pink"
                itemOpacity: 0.8
            }
        }
    }
}

效果：

优点：
加上透明度没毛病
缺点：
不能像css语法实现的任意角是圆角