記事本樣式設計

CSS強大的功能，可以讓你實作出任何想要的外觀樣式，以下的記事本樣式即是一例。

你可以透過很多方式實作此種類型的樣式，這個案例由於要讓使用者可以輸入文字，其中採用了 li 標籤進行內行的實作，同時設定了contenteditable屬性，如此一來此記事本內容即可編輯。

記事本的外觀則配置陰影以呈現立體效果，並設定圓角樣式。

        ul {

         

            list-style: none;

            background-color: lightyellow;

            box-shadow: 4px 4px 4px lightgray;

            width: 600px;

            border-radius: 1%;

            border: 1px solid black;

            height: 600px;

            padding: 40px 40px 4px 80px;

        }

        li {

            border-bottom: 1px dotted gray;

            font-size: 18px;

        }